לפעמים יש אתרים שגורמים לך לעצור ולהשתאות. יש כאלה שעושים לך את זה כי יש להם ממשק מקורי, או עיצוב מפתיע, יש כאלה שהם כל כך שימושיים שאתה אומר – איך לא חשבו על זה קודם, ויש כאלה… שאתה רוצה להשתמש בהם והם מאוד פשוטים, אבל יש בהם כל-כך הרבה בעיות שאתה חייב לעצור ולשאול – למה ככה?! או באנגלית הודית, why like this? נראה דוגמא של אתר כזה, ושבעה רעיונות לאיך לעשות את זה אחרת.
סיים סיים
למי שלא מכיר, רשת המסעדות סיים סיים לקחה את השם שלה ממשפט של יוצאי-מזרח ("same same but different", ישלים כל מטייל שהיה במזרח, אם תגידו לו "same same"). אני גר ברמת השרון, והמשלוחים של סיים סיים מגיעים מהר. זה אוכל אסיאתי מהיר וסביר, והוא בהחלט מספק בימים שלא בא לי לבשל בהם. האתר שלהם מעוצב להפליא, אבל השימושיות שלו נמוכה ביותר.
הבלבול מתחיל כבר בעמוד הראשי.
"What you see is what you eat" מובטח לנו, אבל כל מה שאנחנו רואים זה אהילים סיניים. האם אנחנו באמת רוצים לאכול את האהילים הסיניים?
מספר הטלפון מופיע למטה. המיקום של מספר הטלפון ממש בולט, מיד כשנכנסים לאתר. זה טוב, אבל רק אם יש לכם זכרון מצויין למספרים. אם לא, תרשמו אותו בצד, אתם תצטרכו אותו אחר-כך.
משום מה התאריך, השעה והיום מופיעים בראש הדף. למה זה נחוץ שם? זה מופיע בכל הדפים של האתר.
בניסיון ראשון, נראה שהתפריט לא עובד. אם מנסים להקליק על טקסט מהתפריט – שום דבר לא קורה. מסתבר, שהקו מימין לשורה שרצינו בתפריט הוא זה שמפעיל אותו. מוזר, לא? הציפיה שלחיצה על הטקסט תפעיל את התפריט די טבעית בעולם שכולו קישורים.
באופן אקראי לחלוטין, גיליתי שכל אחת מהמנורות מייצגת סניף אחר של הרשת. מי היה מנחש?
לחצתי על הסניף שלי והתחלתי כבר להרגיש רעב. איפה התפריט?
ממממ… אין תפריט. אבל יש רשימה של כל הסניפים משמאל, הפעם בלי מנורות. נחמד.
נלחץ על "תפריטים" מימין.
שוב לבחור סניף! והתפריט פתאום מופיע בשורה למעלה. מוזר.
התפריט חזר ימינה, ופס הגלילה משום מה נצמד אליו, למרות שבעברית היה נכון לשים את פס הגלילה משמאל (בסוף השורה) ולא מימין. ואם אנחנו כבר עוסקים בגלילה, השטח שאפשר לגלול הוא מאוד קטן, והתפריט מאוד ארוך. צריך להזיז את פס הגלילה מאוד בזהירות כדי לא לרוץ מהר מדי. מאוד קשה לאתר שורה ספציפית בתפריט הזה, או לסרוק אותו במהירות. אם שטח הגלילה היה גבוה יותר, היה הרבה יותר קל.
רואים את הריבועים למטה? הייתם מנחשים שכל ריבוע הוא קישור לתפריט של סניף אחר? ולאיזה סניף מתאים כל ריבוע? למה שארצה להסתכל על סניף אחר, בכלל, אם כבר בחרתי את הסניף של האיזור שלי? לא ברור.
נניח שעברתי על התפריט, ובחרתי מה אני רוצה. עכשיו מאיפה מזמינים? אהה – שאלה טריקית. מה? להזמין מהאתר, אמרתם? עזבו, ככה לא עושים באינטרנט היום.אם אתם זוכרים, בדף הראשי היה כתוב את מספר הטלפון. רשמתם אותו בצד כמו שביקשתי? אם כן, תתקשרו אליו ותזמינו. אם לא, על מה הייתם לוחצים? אני לחצתי על צור קשר. מיד נפתח לי אימייל חדש עם הכתובת של מנהל האתר. אני מניח שהוא לא ממלא הזמנות (אם כי היה יכול להיות נחמד לנסות לשלוח אליו מכתב בסגנון "האזרח י'").
הקלקתי על השם של האתר, בתקווה לחזור לדף הראשי. כלום. בתפריט ראיתי "דף הבית", הקלקתי על הטקסט "דף הבית", אבל כלום לא קרה. נזכרתי שצריך להקליק על הפס בצד. הקלקתי והגעתי. אבל לא לדף הבית! הגעתי לדף אחר, שנראה כמו דף "אודות" (מי אנחנו):
מסתבר שדף הבית נקרא "פתיח". לחצתי על הקו ליד המילה "פתיח" והגעתי לדף הבית. הנה מספר הטלפון. מצויין. אבל שכחתי מה רציתי להזמין. כנראה שהיום באמת אוכל את האהילים, ולא נודלס. רשמתי את הטלפון, ובחזרה לתפריט. עכשיו, סוף סוף, אפשר להזמין.
עכשיו ברצינות
העובדה שחברה שמקבלת כל-כך הרבה הזמנות לאוכל (אני מקווה, הם באמת בסדר) מחזיקה אתר כל-כך לא שמיש, היא די מפתיעה, במבט ראשון. אבל אם תסתכלו על מדור "ביקורשת" ב-ynet (גילוי נאות: אני כותב ב"ביקורשת"), תגלו שחברות גדולות הרבה יותר מחזיקות באתרים שהם לא הרבה יותר טובים. אז למה זה קורה? לא ברור.
7 צעדים פשוטים לתכנון אתר שימושי
בשביל לארגן ולתכנן אתר פשוט כמו של סיים סיים כך שיהיה שימושי יותר, מספיקים כמה צעדים בסיסיים. אתר כזה חייב להיות קל ופשוט לשימוש, אם הוא רוצה למשוך אנשים להזמין אוכל בעזרתו. המשותף בכל הצעדים הללו, הוא מחשבה על המבקר באתר, מה הוא צריך ואיך לענות על הצרכים הללו. כשאתר עונה בהצלחה על הצרכים של המבקר בו, המבקר נהנה מהביקור, ויש סיכוי גדול יותר שיחזור להשתמש בו שוב. כמובן שנדרשים הרבה יותר מ-7 הצעדים האלה (למשל, נחוץ גם מעצב גרפי מוכשר שידע להעביר את המסר היטב), אבל אם תתחילו עם הצעדים האלה, זו תהיה התחלה טובה:
- הגדירו לעצמכם מי "המבקר הטיפוסי" באתר, ומה הדבר שהכי חשוב לו להצליח לעשות. אפשר גם לבחור 2-3 מבקרים "טיפוסיים" עם צרכים שונים, אבל אז הכרחי לדרג אותם לפי סדר חשיבות.
במקרה של סיים סיים, המבקר הטיפוסי הוא איש רעב (או אישה), שרוצה להזמין אוכל. - עצבו את הדפים והקישורים באתר לפי הדירוג מסעיף 1: כלומר, מה שהמבקר הראשון ברשימה צריך יהיה הבולט ביותר בדף הראשי של האתר, מה השני צריך יהיה קצת פחות בולט וכן הלאה. הדרך אל היעד של "המבקר הטיפוסי" הראשי צריכה להיות הקצרה (מעט קליקים) והברורה ביותר (קל לגלות איפה להקליק).
במקרה של סיים סיים, היה מספיק לרשום את שמות כל הסניפים בבירור על העמוד הראשי, כשקליק עליהם מוביל לתפריט של הסניף. - בכל דף באתר, דאגו שכל המידע שנחוץ למבקר באותו הדף יהיה זמין וברור, ושלא יהיה בו מידע מיותר.
באתר של סיים סיים, היה כדאי לרשום את מספר הטלפון להזמנות בדף של התפריט, ולהוסיף קישור לתפריט של כל סניף מהדף של הסניף. - היו עקביים, גם בתוך האתר וגם מול סטנדרטים של אתרים ברשת.
בסיים סיים, למשל, העקביות נשברת כמה פעמים: התפריט מופיע לפעמים למעלה ולפעמים בצד (חוסר-עקביות בתוך האתר), הדף הראשי נקרא פתיח ולא דף הבית (חוסר-עקביות עם סטנדרטים). קליק על הלוגו של החברה לא מוביל לדף הראשי (שוב, סטנדרטים). - השתמשו בסמלים (אייקונים) רק אם הם ברורים לכל מבקר באתר. שימוש בטקסט יהיה בטוח יותר. השתמשו במושגים ברורים, כאלה שכל אחד יבין.
באתר של סיים סיים, למשל, הקישור בין מנורה סינית לסניף לא היה ברור. הוספת שם הסניף על גבי המנורה היתה מקלה על המבקרים לעשות את הקישור הזה. - ודאו שהאתר שלכם עובד עם דפדפנים שונים. אחוז המשתמשים ב-Internet Explorer בעולם הולך ויורד כל הזמן, גם בארץ, ואחוז המשתמשים ב-FireFox וחבריו (Safari, Opera, Chrome) עולה. זה עשוי לדרוש מעט מאמץ ולייקר את האתר, אבל מה זה לעומת העלות של מבקר שנוטש את האתר שלכם כי הוא נראה מבולגן?
האתר של סיים סיים עולה מצויין בכל הדפדפנים בהם בדקתי אותו. - בדיקות, בדיקות, ושוב בדיקות. תנו לכמה אנשים להשתמש באתר, כשאתם צופים בהם בשקט, מאחורי הגב. תנו להם משימה לבצע באתר, ותראו איך הם מתמודדים איתה לבד. אם אתם רואים שהם נתקעים, אל תעזרו להם. לכל היותר, תשאלו אותם מה הם מחפשים ורק אם הם ממש אבודים, גלו להם את התשובה. כך תגלו מה באמת לא ברור באתר. אם תעזרו להם מוקדם מדי, הם אולי יגיעו למטרה יותר מהר, אבל אתם תפספסו את המטרה של הבדיקה.
אם היו נותנים בסיים סיים למישהו להזמין סושי מסניף רמת השרון בעזרת האתר, ומתבוננים בו בזמן שהוא עושה את זה, היו בוודאי מגלים את כל הבעיות שציינתי כאן, אם לא יותר.
שיעורי בית (העשרה לחרוצים)
לצערי, באנגלית:
- כל עולם השימושיות על רגל אחת, כתבה מצויינת מתוך Smashing Magazine.
- מצגת מחוייכת ומאוד ויזואלית – 10 טיפים לאתר שימושי.
- 10 היוריסטיקות של נילסן, עקרונות בסיסיים לעיצוב ממשק משתמש.
רוצים ללמוד עוד?
בסדנת עיצוב חוויית המשתמש תוכלו להכיר את תחום "חוויית המשתמש" בצורה יסודית ומדוייקת. הסדנה בהנחייתי כוללת 4 מפגשים של 4 שעות ובהם שפע רב של ידע מקצועי וגם תרגול.
"הסדנה היתה שילוב מצוין בין רוחב ועומק, ובין תיאוריה לפרקטיקה. אני מרגישה שקיבלתי הכרות מצוינת עם עולם חווית המשתמש, כלים והתחלה התחלה של פיתוח אינטואיציות. הדוגמאות אמיתיות ומצוינות, וגם ההפניות למקורות אחרים פותחות עולם ומלואו.", נגה עמית, מעבדות חדשנות, מיקרוסופט
30 במרץ 2009 בשעה 0:01
סקירה מעוררת תאבון
מהתיאור שלך אני תוהה האם אפילו הגדירו תסריטי שימוש בסיסיים (Use case scenarios) כמו הזמנה, ביטול הזמנה וכו'. ברגע שאלה מוגדרים אפשר עוד לפני שמערבים משתמשים ובשלב אב טיפוס מוקדם לבצע scenario walkthrough בדיוק כפי שאתה תיארת בפוסט בכדי לראות כיצד המסכים, אמצעי הקלט-פלט, הניווט וכל שאר מרכיבי הממשק תומכים בביצוע של התסריט בצורה מספקת (מהירה, נחה, ברורה וכו'). אנחנו משתמשים בעבודה בכלי שמייצר אוטומטית עבור כל שלב בתסריט השימוש שאלות "מה אם?" כמו "מה אם המשתמש לא יודע מה הוא אמור לעשות עכשיו?" בכדי לעלות על בעיות פוטנציאליות. זה לא אמור להחליף מעורבות משתמשים, ומדובר כמובן בצעד אחד בשלבי העיצוב ששם את הממשק בהקשר שימוש ברור על פי הצרכים של האנשים.
30 במרץ 2009 בשעה 14:04
תודה על התגובה, אמיר. גם אני בספק אם הוגדרו Use Cases כאן. נראה לי שיש הרבה אתרים מהסוג הזה, שבהם נקודת המוצא בתכנון האתר היא העיצוב הגראפי, ולא חוויית המשתמש.
מה הכלי שאתם משתמשים בו? זה מוצר מדף או משהו שאתם פיתחתם?
30 במרץ 2009 בשעה 14:41
כלי שפותח אצלנו בשם ART-SCENE
http://hcid.soi.city.ac.uk/research/Artsceneindex.html
31 במרץ 2009 בשעה 11:11
מאמר מאוד מעניין.
נתקלתי לא פעם בבעיית התפריט במקום אחד, המספר במקום אחר. ככה עובד rest.co.il שהרבה אתרי מסעדות בנויים במערכת שלו, ויכול להיות שזה משפיע על כל הענף.
31 במרץ 2009 בשעה 12:13
תודה עינת, וברוכה הבאה לבלוג!
כבר כתבתי קצת על rest בפוסט אחר:
http://www.usable.co.il/archives/3
אמנם כתבתי בפוסט שלמעלה שחשוב לשמור על סטנדרטים של אתרים דומים ברשת, אולי צריך היה לסייג את זה – לשמור רק על סטנדרטים של אתרים *טובים*… יש ב-rest הרבה בעיות שימושיות וממשק: מערכת ניווט שונה בכל עמוד, חלונות חדשים שנפתחים כמעט בכל קליק, אנימציות מטרידות, ועוד רבות אחרות.
מאחר ו-rest בכל זאת השחקן הראשי בתחומו, הייתי שומר על תאימות (אם בכלל) בשפה, כלומר – כותרות תפריטים, כפתורים וכו', ובתכנים שמוצעים (תפריט, המלצות, איך להגיע וכו').
1 באפריל 2009 בשעה 8:01
ממבט ראשון העיצוב של האתר ברמה הויזואלית (צבעים וכיתוביות בכל עמוד) נראה מאוד דומה, אבל שמתחילים לשוטט בפנים יש המון שוני בניווט ובהתמצאות.
אני חושש שהם הם לקחו את הסלוגן SAME SAME BUT DIFFERENT רציני מדיי
9 באפריל 2009 בשעה 0:01
ברק תעשה לי ילד!
אחלה של פוסט
יאללה תמשיך להכות בראש
כתוב בצורה ברורה ושנונה
מאוד פוקח עיניים
הצטרפת בכבוד רב לרשימת ה RSS שלי
15 באפריל 2009 בשעה 19:46
תודה בנדר
ברוך הבא לבלוג, נהנית ספר לחבריך…
ד"ש לאבי
26 באפריל 2009 בשעה 15:18
הפוסט הזה טוב
וברפרוף קצר על הבלוג – הבלוג שלך יפה ומעשיר אבל
וזה "אבל" גדול
ראיתי כמוך כבר עשרות, אתם יודעים יפה מאוד לקטול אתרים, השאלה היא אם יש צדיק אחד בסדום, אפילו כזה שאתה עשית,
אני בונה אתרים כ8 שנים ובשנתיים האחרונות אחראי על UI של מוצר מבוסס WEB ואני חייב להגיד לך, יש אילוצים ושלל תירוצים לאיך שאני בונה את מה שאני בונה
לא, אין לי תירוץ לsame same, לא בניתי אותו, אבל אני בטוח שיש משהו שגרם לבונה האתר לבנות אותו כמו שהוא בנה,
אני רוצה לראות דוגמא אחת שלא בתנאי מעבדה, של אתר חי נושם ובנוי נכון לפי כל כללי השימושיות
26 באפריל 2009 בשעה 16:04
אהלן עמרי,
אני בהחלט חולק את התסכול שלך. בכל פרוייקט שהייתי שותף לו, היו שפע של אילוצים שהיה צריך להתחשב בהם בתכנון הפרוייקט: טכניים, תקציביים, פוליטיים (הכוונה לפוליטיקה אירגונית) ובין-אישיים אחרים. הרבה פעמים, התחשבות באילוצים משמעה ויתורים באספקטים שונים של הפרוייקט. כל מעצב גרפי יספר לך על לקוח שהתעקש שהלוגו יהיה אדום כי אישתו אמרו לו שאדום יפה לעסק שלו, אפילו שהוא עוסק באיכות הסביבה (או התפשרות דומה). פשרות פוגעות גם בשימושיות, וזה קורה הרבה.
יש שפע של דוגמאות ברשת של אתרים חיים ונושמים שעובדים נכון, ורובם לא שלי
נכון לא אומר מושלם; אין הרבה דברים מושלמים – לא אתרים ולא אחרים. אבל בין מושלם לבין מה שקורה ב-same same או ב-Orange שכתבתי עליו בעבר, יש מרחק גדול. המטרה של הבלוג שלי היא לא לקטול אתרים אחרים, אלא ללמוד בעצמי (ואגב כך גם לסייע לאחרים ללמוד) איך אפשר לעשות דברים טוב יותר. כולי תקווה שזה גם מצליח.
26 באפריל 2009 בשעה 16:19
אכן הצצתי באתרים שלך,
צר לי, אבל אין לי עין מספיק מקצועית בשביל להגיד אם יש משהו לא נכון באתרים הללו, אבל לך יש
אגיד לך מה אני רוצה לראות, אתה מוזמן לעשות עם זה מה שנראה לך
אפשרות אחת – לתקן את העולם,
הצגת מה לא בסדר באתר מסוים, בא וספר איך היית מתקן, מה היית עושה נכון יותר תוך שמירה על מתווה האתר הקיים/מגבלות עיצוב וכו'
אפשרות שניה-דוגמא לאחרים
קח אתר שלך וספר מה עשית בו נכון, למה בחרת במה שבחרת, מיקמת במקומות האלה ובאחרים לא, מה עבר לך בראש כשתיכננת ויישמת את האתר
שתי הדוגמאות הללו יכולות לגרום למהנדסי UI להבין את צורת החשיבה השימושית ולשמש שקו מנחה בפרוייקט הבא
26 באפריל 2009 בשעה 16:25
עמרי,
לגבי אפשרות אחת – אם תסתכל כאן למעלה, יש בדיוק את זה. על כל עקרון שאני מציג, כתבתי מה היה אפשר לעשות באתר של סיים סיים כדי לממש אותו.
לגבי האפשרות השניה – זה בהחלט רעיון לפוסט בעתיד. אני מבטיח לכתוב כזה. אני מזמין אותך להירשם לעדכונים באתר, או בעזרת RSS, ולקרוא כשהוא יתפרסם.
6 ביולי 2009 בשעה 22:04
נרשמתי אתמול לאחר שנחשפתי אליך באמצעות "חורים ברשת", התחלתי לשוטט קצת אחורה היום, ומאד נהנה.
שכחת עוד פאשלה באתר – הדומיין שלו!!!
אני הייתי מצפה שהאתר יהיה samesame.co.il
במקום זה הוא 2same.co.il
לא הגיוני בכלל. לא מעניין אותי שזה מקצר.
אם אני מקליד ישירות לשורת הכתובת את כתובת האתר שניחשתי בגלל שאני מכיר את שם המסעדה, ומגיע לאינטרניק, אז הייתי מניח שהמסעדה נסגרה. בחיים לא הייתי עולה על הדומיין בלי לגגל. וגם אז זו תוצאה רביעית.
מצד שני, ניסיתי עכשיו את האתר הרשמי, והוא לא עובד… האם המסעדה באמת נסגרה?
וכמה מזה באחריות הוובמאסטר?
(או שמא… הם עובדים על אתר חדש…)
לילה טוב!
- מוטי
7 ביולי 2009 בשעה 6:33
תודה על התגובה, מוטי. אני מסכים, הדומיין מוזר, אבל אני מניח שהוא כזה בגלל שמישהו תפס אותו ולא הסכים למכור במחיר סביר ל-Same same. זה קורה לא מעט, והלוואי ושיטת הדומיינים היתה אחרת, שלא מאפשרת סחיטה כזו. מישהו תפס את danin.com ולא הסכים לשחרר אותו תמורת פחות מכמה אלפי דולרים, אז קניתי את barakdanin.com, ונפרדתי ממנו לשלום.
Same same עדיין קיימים, אגב, אם באמת דאגת…