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

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

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

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

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

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

flairbuilder

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

protoshare

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

Pencil Project

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

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

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

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

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

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

המטרה המרכזית בקמפיין הנוכחי היא מטרה תדמיתית - לקבע את רשת NGN כדבר הבא, ה - must שישדרג את החוויה שלנו. מזכיר את הרעש שעשו כשרצו שכולנו נרדוף אחרי ה HD המובטח. רוב תקציב השיווק של ה - NGN הושקע במדיום הטלווזיוני, שהוא מדיום בו הצופה הוא שחקן פאסיבי בעיקר והקליפ המרהיב עשה את המירב על מנת לסחוט מאיתנו התרגשות. האינטרנט לעומת זאת, מאפשר למשתמש (אפילו שם התואר מעיד על השוני: צופה - פאסיבי / משתמש - אקטיבי) אינטראקציה עם המותג או עם המסר המרכזי המועבר בקמפיין. זו רק ההתחלה כמובן - בנוסף ליכולת to interact, ניתן לייצר ויראליות, ניתן לייצר פניות של לקוחות פוטנציאליים עבור הרשת החדשה. הבדל משמעותי ללא ספק וחבל שבזק לא ניצלה את ההבדל הזה למיקסום אפקטיביות הקמפיין.

נפנה לסקירה קצרה של מה נעשה ומה ניתן היה לעשות (ממש על קצה המזלג):

1. אינטראקציה בין המשתמש למותג

בקמפיין בזק באינטרנט ישנם 2 פיצ'רים המכוונים לייצור אינטראקציה עם המשתמש:

1. בדיקת ההבדל בין מהירות הורדת משחקים / מוזיקה / סרטים כיום, לעומת המצב ברשת ה - NGN.

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

מה ניתן היה לעשות? למשל, מרוץ מכוניות (או זריקת עגבניות) - משחק בו המשתמש נוהג במהירות הגלישה הנוכחית שלו, וצריך להתחמק ממכוניות שנוסעות לצידו ולפניו. מוט הילוכים מבריק, עם לוגו כסוף ובולט של רשת NGN, מזמין את המשתמש למשוך אותו ולעבור למהירות החדשה. המשתמש מושך את המוט, מקבל פידבק ויזואלי מיידי, מופיעה ספירה לאחור 3 - 2 - 1 ובבת אחת הוא עובר למהירות פי 10 נניח. המכוניות מסביבו הופכות ממכוניות רגילות בסגנון משחקי הוידאו של שנות ה - 80-90, לכלי רכב מעוצבים והנוף כולו מתחלף לעולם החדש מהקליפ בטלוויזיה. אז נכון שואלי נסחפתי כאן בתיאור, אבל אני חושב שההבדל עכשיו הוא ברור - האתגר של המשתמש יהיה להתחמק מהמכוניות במהיורת הגבוהה פי 10 - וממחיש למשתמש (אקטיבי כבר אמרנו?)  את המהירות המדהימה של הרשת החדשה.

2. מד מהירות המודד את מהירות הגלישה הנוכחית במחשב שלך.

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

נלך לכיוון רעיון אחר, שהיה חלק מהקפיין, ויכול להעשיר את החוויה: בקמפיין צפינו בכל מיני ניירות עטיפה נושרים מבניינים, מנדנדות בגני משחקים, רכבים וכן הלאה. שיש, צלופן ורוד, פקפקים שכיף לפוצץ עם האצבעות, קרטונים עם קלקרים לבנים שכיף לפורר לחתיכות קטנות וכן הלאה. המשך של התמה הזאת יכול לאפשר פיצ'ר המשמיע את הקולות השונים של ניירות העטיפה. המשתמש יוכל לשלוח לחברים שלו (נניח בפייסבוק) לינק למתנה שהכין להם. בעזרת ממשק של drag and drop, החבר נדרש לקרוע מהחבילה את כל ניירות העטיפה השונים, כל אחד מפיק רעש משעשע משלו. כאשר הוא מגיע לתוך החבילה הוא מוצא - לינק להרשמה / מילוי פרטים להגרלה לטיסה לניו יורק (אפרופו השידור NGN Live) - 100 הראשונים מקבלים טיסה לניו יורק חינם. תקציב קטן לעומת תקציב הקמפיין, אבל אני הייתי נרשם. וגם רושם את האחים והאחיות שלי.

3. לקוחות פוטנציאליים

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

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

אז כמו שהבנתם, התשובה שלי לשאלה שבכותרת היא "לא, הפוטנציאל לא מוצה" - וחבל שכך.

אשמח לשמוע תגובות והערות.

כמדי חודש אנחנו שמחים לשתף אתכם בלינקים נבחרים שעניינו/ריגשו/הפתיעו אותנו ברשת. אני מקווה שתהנו מהם כמונו.

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

ככה בונים חנות
דוגמה מעולה לאתר ecommerce המתמחה במוצרי בית. מאופיין ומעוצב בצורה חכמה ונוחה מאוד. בהחלט case study מעניין לכל מי שמבצע פרויקט בתחום.

ארץ חווית המשתמש
באירוע UXWeek האחרון בלטה הרצאה אחת במיוחד. Jesse James Garrett בעלי חברת adaptive path העביר הרצאה על "ארץ חווית המשתמש". ההרצאה סבבה סביב המושג "חווית המשתמש" בעיקר במדיום האינטרנטי ועל האתגרים העתידיים העומדים בפני האנשים העוסקים בתחום. בהחלט מומלץ לכל מי שחי את התחום.
בנוסף, אני מנצל את ההזדמנות הזאת כדי להמליץ על הספר The Elements of User Experience אותו כתב גארט, שבהחלט נותן בסיס טוב למי שמעוניין להיכנס לתחום.

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

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

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

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

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

כל החברים
רובנו משתמשים במספר תוכנות IM כמו Messenger ו - GTalk, וזה מתחיל להיות מורכב. Digsby מרכזת רשימה אחת המכילה את כל אנשי הקשר שלכם (פייסבוק, טוויטר, IM). התוכנה מאפשר גם שליחת מייל מיידית, עדכון סטאטוס אחיד לכולם ומעקב אחרי הפעילות ברשתות החברתיות שלכם. תוכנה מובילה נוספת המציעה שירות דומה היא http://www.trillian.im/

ScrollLock? ScrollRock!
סוף סוף נמצא שימוש לכפתור ה Scroll Lock. הכפתור שהיה עד כה ללא שימוש יאפשר לכם להגיד לכל העולם איך אתם מרגישים והכל בלחיצת כפתור (אחד). לא שימושי במיוחד אבל בהחלט מעניין וכייפי.

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

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

augmented reality
augmented reality מדובר טכנולוגיה שעושה שימוש באלגוריתמי זיהוי תנועה ומנועי תלת מימד ו"מלבישה" מודלים ממוחשבים על גבי מודלים מהעולם האמיתי. יצא לנו לדבר על augmented reality בעבר בפוסט "Augmented reality - הממשק האמיתי".
כבר לפני כמה חודשים היינו יכולים למצוא לא מעט דוגמאות ברשת להדגמת יכולת הטכנולוגיה. היום ניתן למצוא לא מעט דוגמאות של שימושים אמיתיים ב-Augmented reality.

כמה דוגמאות לשימושים מעניינים

	חברת הדואר Priority mail יצאה בקמפיין חדש ומעניין. הם השכילו לשלב את הטכנולוגיה כדי לאפשר לנו לבדוק בדיוק באיזה גודל חבילה אנו צריכים להשתמש במשלוח. זוהי דוגמה מצוינת להטמעה של טכנולוגיה חדשה לשימושים פונקציונאלים.
	קמפיין מגניב שdoritos העלו האפשר לחובבי החטיפים להשתמש בשקית הריקה כבסיס עליו משלבים דמויות שונות ומשונות שניתן ליצור באתר יעודי.
	דוגמה אחרונה ומאוד שימושית היא של חברת Ray-Ban שמשתמשת בטכנולוגיה כדי לעזור לנו למדוד את כל המשקפיים שרק נרצה מבלי לצאת מהבית.

וככה זה נראה אצלנו:

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

שם הפרויקט: Callperfume
תעשיה: בישום
הבית החם: www.callperfume.co.il
צוות העבודה: נטלי, אביעד, רעיה, רן, מורן, יונתן ורותם
באשמתנו: אפיון, עיצוב, פיתוח צד קדמי, פיתוח טכנולוגי, בדיקות והשקת האתר
תחילת עבודה: מאי 2009
השקה: אוגוסט 2009
תוצאה: מראה חדש, מגאזין בשמים מושקע וגלגל בשמים יחודי

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

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

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

משיחה עם שירות הלקוחות של החברה הבנו שהרבה משתמשים מתעניינים בעולם הבשמים וצמאים למידע איכותי מהימן.

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

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

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

לפני שאתם רצים לקנות בשמים, שבו בנחת בבית והקליקו בביטחון אל הבושם האהוב אליכם במחיר הכי טוב שתמצאו! שנה טובה!

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

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

 
מצב הבדיקה. החלק האדום מייצג את מיקום המצלמות במסך.

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

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

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

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

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

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

הבנה של דפוסי התנהגות (Bee Swarm)
איפה המשתמשים מתחילים לסרוק את העמוד? האם יש הבדל בין סריקה של משתמשים בגילאים שונים? ממין שונה? האם בכלל ניתן לזהות דפוס בעמוד הנבדק? הכלי הבא עונה לנו על שאלות אלו והרבה יותר. ה Bee Swarm נותן לנו את האפשרות לעקוב אחר תנועות העיניים של כמה משתמשים בו זמנית ולזהות דפוסים שונים בהתנהגות.

מפות חום (Heat Maps)
מפות החום ש Tobii מייצר עוזרות לנו לראות מיידית את האזורים בהם העין התמקדה ואת אלו שעיני המשתמשים לא ראו בכלל. ישנם ניתוחים רבים שבאפשרותינו לעשות על גבי מפות החום ובנוסף ניתן לייצר מפות חום רצות - כלומר לראות את היווצרות הנקודות החמות בזמן אמת.

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

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

נבחר כמה אזורים לבדיקה. כל אזור מיוצג על ידי שם וצבע.

תוצאות בדיקת האזורים. בבדיקה זו בדקנו את זמן הצפיה הכולל בשניות בכל אחד מהאזורים שנבחרו.

מתי כדאי לעשות בדיקת Eye Tracking?
כיום המערכת נמצאת בשימוש בחברות אינטרנט ומסחר אינטרנטי מובילות, ביניהן eBay, Google, at&t, Facebook ו- GSK.
בדיקות ה-Eye Tracking מיועדות לכל מי שרוצה להבין באמת מהי חווית השימוש במוצר שלו, לשפר תהליכים ולהעלות אחוזי conversion מכל הסוגים. המסך של Tobii ובדיקות ה-Eye Tracking הם בהחלט הדבר הכי קרוב שיש היום לקריאת מחשבות.

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

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

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

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

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

הסיפור מתחיל בבחור אמריקאי בשם ואנבר בוש. בוש נולד בצ'לסי וסיים בהצטיינות את אוניברסיטת טאפטס ב1890. האיש שהיה טוב במספרים וחובב מכשירים המציא ב1913 מכשיר מדידת שטחים לא ישרים שזיכה אותו בהכרה עולמית. בוש הצטרף לפקולטה להנדסה של MIT, שם בשנת 1913 המציא מכשיר מסורבל בשם "מנתח דיפרנציאלי" שהיה מחשב מכני שנועד למצוא פתרון למשוואת דיפרנציאליות. המצאת המכשיר קיבעה את מעמדו של בוש כמהנדס גאון. במהלך מלחמת העולם השניה השתמש הצבא האמריקאי במנתח הדיפרנציאלי לחישוב מסלולם של טילים.
ביולי 1945 פרסם בוש מאמר בירחון "אטלנטיק" תחת הכותרת "כמו שאנחנו אולי חושבים". במאמר טען בוש כי הבעיה הגדולה ביותר שניצבת בפני עולם המדע היא עודף מידע ואי היכולת לארגן אותו ולהשתמש בו בצורה יעילה. במאמר אף הציע פתרון - המיקרופילם והשפופרת הקתודית.
שילוב של אותם מכשירים יתן למעשה מחשב ומסך (פרימיטיביים) אותו כינה בוש MEMEX. "החומרים בממקס יקוטלגו על פי הכותרת והנושא אך המשתמשים יוכלו לעבור ממסך אחד למשנהו באמצעות נתיבים. בכל פעם שחוקר יצור מסמך חדש הוא יוכל לקשר אותו לנושא קיים". בוש טען כי צורה זאת מחקה לחלוטין את הפעולות האסוציטיביות של המוח האנושי. הMEMEX של בוש מעולם לא נבנה אך אותו רעיון היה הניצוץ הראשוני בתהליך ליצירת רשת האינטרנט.

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

דאגלס אנגלבארט, חוקר מסטנפורד שקרא את מאמרו של בוש, הציג את תוכנת הhypertext הראשונה שפעלה, אותה כינה "מערכת האון ליין" (the online system) תוכנה זו אפשרה למשתמשים לדפדף בין חלונות טקסט רבים באמצעות שימוש בקוביית עץ שהורכבה על כדור - אבטיפוס של העכבר. אנגלבארט הקדים את זמנו, שכן בתקופתו המחשבים היו איטיים, קשים לתכנות ויקרים. היה קשה לתקשר איתם ולהם היה קשה לתקשר עם המשתמשים, שהיו בדרך כלל חבורה של "יורמים" שהשתמשו במחשבים בפקולטות למדע. קונספט הרשת לא יכול היה להמשיך להתפתח ללא המצאת המחשב האישי, שתפרוץ את הגבולות שבין מומחי המחשבים ובין שאר האוכלוסיה.
במקביל, בסוף שנות ה60 החליטה "הסוכנות לפרויקטים במחקר מתקדם" (ARPA) גוף כפוף לפנטגון, לבנות רשת מחשבים שתחבר מספר פקולטות אוניברסיטאיות שעסקו במחקרים עבור משרד ההגנה האמריקאי. "בולט בראנק ונימן" חברה טכנולוגית עם קשרים טובים זכתה במכרז לבניית הרשת החדשה, חברת Honeywell סיפקה את החומרה וחברת הטלפונים AT&T סיפקה את החוטים.

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

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

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

אד רוברטס, מייסד חברת MITS לייצור מחשבונים, הכניס מיקרוצ'יפ לתוך קופסה על מסך וקרא להמצאתו Altair על שם הדמות המפורסמת ממלחמת הכוכבים.

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

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

APRANET פוצלה לשתיים. חצי הוקצה לצבא (MILNET) והחצי השני למדענים ולמחקר, נשאר בשמו המקורי.

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

טים ברנרס-לי, מהנדס תוכנה שהתרשם מאוד מממאמריו של ואנבאר בוש, כתב תוכנה לה קרא World Wide Web. או בקיצור WWW. התוכנית היתה פשוטה לכאורה (וזה היה כוחה העיקרי) מערכת הWWW תשב מעל הרשת הקיימת ותשתמש בפרוטוקולי התקשורת וטכנולוגית חילופי החבילות שלה, בנוסף לשימוש במחשבים קיימים ובקווי טלפון. המערכת תכלול שלושה מרכיבים בלבד: שפת מחשב ליצירת קצבי היפרטקסט - Hypertext Markup Language או בקיצור HTML, פרוטוקול להעברת קבצים - HTTP וקוד כתובת ייחודי שיצורף לכל קובץ שנקרא Universal Resource Identifier. המילה identifier הוחלפה מאוחר יותר במילה locator ומכאן ראשי התיבות URL.
ברנרס יצר לאחר מכן את האתר הראשון www.info.cern.ch אשר הכיל את תאוריי הכללים שלו. בעזרתם של חברים תיכנן ברנרס גם דפדפן פשוט שאפשר למשתמשים לערוך ולקרוא קבצים.

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

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

שלוש שנים לאחר מכן הופיע פרוטוקול הHTTP וכך נולד בעצם האינטרנט כפי שאנו מכירים אותו כיום.

עזרה בכתיבת הפוסט: Wikipedia והספר המעולה של ג'ון קסידי - Dot.Con

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

כדי לדעת לאן בדיוק המשתמשים שבדקנו מסתכלים יצרנו בעזרת המערכת של TOBII מפות חום של שני העיצובים.

העיצוב הנוכחי

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

העיצוב החדש

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

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

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

אחד הכלים המעניינים והמרשימים ביותר בעבודתו של מאפיין ומעצב כיום היא האינפוגרפיקה. האינפוגרפיקה היא הגדרה כללית להמחשה חזותית של מידע באמצעים ויזואלים שונים.

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

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

מפת הרכבות של ה london tube כיום.

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

Web Trends

אינפוגרפיקה מושקעת מאוד המסכמת את 333 הדומיינים המשפיעים ביותר ברשת האינרנט לשנת 2008 מבית IA.

Musicovery

musicovery מציג את רשימת השירים בצבעים, צורות וקשרים המעידים על הז'אנר ממנו הם מגיעים ועל הקשר שלהם עם שירים נוספים. מעבר להעברת המידע זוהי דוגמה מצוינת לחווית משתמש יחודית הנובעת בעיקר מאינפוגרפיקה.

Air New Zealand

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

NewMap

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

NewYorkTimes

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

HeatMaps

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

Virtual Water poster

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

אינפוגרפיקה כחלק מתהליך האפיון והעיצוב

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

אינפוגרפיקה לשיפור הסריקות

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

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

אדום זה רע

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

שימוש בגרפים

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

שימוש בגרפים מתאים במיוחד אם מדברים על העולם הפיננסי בו ניתן לתרגם כל אירוע לתזוזת גרף.

פופולארי וגדול

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

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

האינפוגרפיקה היא כלי מרשים להעברת מידע תוך שימור על יופי ועניין. בתור מאפיין חשוב לי להשתמש בה כבר בשלב האפיון כחלק מתהליך העבודה.