Basics - 3

Think UX Class 3

‫און ליין‬

‫אוף ליין‬

‫מסקנה – רוב תלמידי הקורס רואים עצמם עובדים בתחומים שאינם "אינטרנטיים"‬

‫מאקרו של ניהול מוצר וחווית משתמש‬ ‫טכניקת אפיון אתר‬

‫‪10‬‬ ‫‪9‬‬ ‫‪8‬‬ ‫‪7‬‬ ‫‪6‬‬ ‫‪5‬‬ ‫‪4‬‬ ‫‪3‬‬

‫‪2‬‬ ‫‪1‬‬ ‫‪0‬‬

‫מסקנה – רוב תלמידי הקורס מעדיפים ללמוד את המאקרו של חווית המשתמש‬

Table of contents Hulu Kindle IA UI GUI Usability Usability Test UCD

IA

UI

GUI

‫אתר משותף ל ‪ NBC‬ו ‪ Fox‬המציע סטרימינג ווידאו של סדרות טלוויזיה וסרטים‬ ‫תוך כדי שידור פרסומות‪) .‬שוק פרסומות הווידאו ברשת מוערך כיום ב ‪ $1.4‬מיל' ועד ‪ 2011‬הוא אמור לצמוח ל ‪ $4.3‬מיל'(‬ ‫מודל ההפצה של האתר נסמך על שני ערוצים‪.‬‬ ‫‪ .1‬אתר ‪ - Destination‬ללא תשלום‪ ,‬נתמך בפרסומות‪.‬‬ ‫‪ .2‬שירות סינדיקציה ‪ -‬דרך אתרי תוכן אחרים ומשתמשים )אפשרות "לעמבד" נגן(‬

‫זה ניסיון נוסף של חברות מדיה להתמודד עם תופעת ה ‪Video Sharing‬‬ ‫והמודלים החדשים של צריכת תוכן דרך הרשת‪.‬‬

IA UI GUI

IA UI

– Information Architecture

– User Interface

GUI

- Graphic User Interface

‫‪GUI‬‬

‫‪IA‬‬ ‫צורה‬

‫תוכן‬

‫התנהגות‬

‫‪UI‬‬

‫‪IA‬‬

‫ארכיטקטורת אינפורמציה‬ ‫זוהי התשתית לבניית האתר‪ ,‬הבלו פרינט שעליו נבנים כל האספקטים השונים‪:‬‬ ‫צורה‪ ,‬פונקציונאליות‪ ,‬מטאפורות‪ ,‬ניווט‪ ,‬ממשק‪ ,‬אינטראקציה ועיצוב וויזואלי‪.‬‬

‫‪IA‬‬

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

‫‪UI‬‬

‫ממשק משתמש‬ ‫צירוף האמצעים בהם משתמש נמצא באינטראקציה עם מערכות היכולות לבוא לידי ביטוי כמכונות‪ ,‬תוכנות או כלים מורכבים‪.‬‬

‫ממשק המשתמש מספק אמצעים ל‪:‬‬ ‫‪ – Input‬מאפשר למשתמש לשלוט ולתפעל את המערכת‬ ‫‪ – Output‬מאפשר למערכת לתת חיווי שמשפיע על פעולות המשתמש‬

‫‪UI‬‬

‫‪Web-based user interfaces‬‬

‫במקרה שלנו אנחנו מתמקדים בממשקים מבוססי רשת‪,‬‬ ‫אלו ממשקים שבאים לידי ביטוי ביצירת דפי ווב שניתנים לצפייה דרך דפדפן‪.‬‬

‫‪UI‬‬

‫‪Prototypes / Wire Frames‬‬

‫מקובל לתכנן ולמפות את תהליך ה ‪ UI‬דרך פרוטוטייפים ואפיונים פונקציונאליים‪.‬‬ ‫פרוטוטייפ הוא אב טיפוס שבדרך כלל נראה כמו השרטוט למטה‪:‬‬ ‫הוא מגדיר את האובייקטים שצריכים להיות בעמוד;‬ ‫את הקומפוזיציה שלהם בעמוד;‬ ‫ואת תוצאות האינטראקציה עם האובייקטים דרך טבלאות אינטראקציה )איך המערכת תגיב ל ‪(Output & Input‬‬

‫‪GUI‬‬ ‫‪Graphic User Interface‬‬ ‫זוהי המעטפת‪ ,‬ה"עור" )‪ (Skin‬ששמים על ה ‪.UI -‬‬ ‫מטאפורות נוספות לתיאור ה ‪:GUI‬‬ ‫גוף האדם הוא ה ‪ UI‬והביגוד הוא ה ‪GUI‬‬ ‫שלד הבניין הוא ה ‪ ,UI‬הדלתות‪ ,‬חלונות‪ ,‬צבע‪ ,‬טיח‪ ,‬רהיטים הם ה ‪GUI‬‬

GUI Graphic User Interface

‫‪Usability‬‬ ‫שימושיות (שמישות)‬ ‫מונח המסמן את הקלות בה משתמשים מפעילים כלי או כל אובייקט מעשי ידי אדם בכדי להשיג מטרה מסוימת‪.‬‬ ‫שימושיות במקרה שלנו מתייחסת לרמת האלגנטיות והבהירות בה מעוצבת האינטראקציה עם תוכנה או אתר‪.‬‬ ‫המדדים על פיהם מעריכים את רמת השימושיות )ג'ייקוב נילסן(‪:‬‬ ‫‪ ‬למידות )‪ - (Learnability‬כמה קל למשתמש להשלים משימה בסיסית בפעם הראשונה שהוא נתקל בעיצוב?‬ ‫‪ ‬יעילות )‪ – )Efficiency‬ברגע שמשתמשים למדו את העיצוב‪ ,‬כמה מהר הם משלימים משימה?‬ ‫‪ ‬זכירות )‪ - (Memorability‬כשמשתמשים חוזרים לעיצוב לאחר תקופה בה לא השתמשו בו‪ ,‬באיזו קלות הם יכולים לבסס בקיאות בשימוש בעיצוב?‬ ‫‪ ‬טעויות )‪ – )Errors‬כמה טעויות עושה המשתמש‪ ,‬עד כמה הן חמורות‪ ,‬ובאיזו קלות המשתמש יכול להתאושש מטעויות אלו ולהמשיך במשימה?‬ ‫‪ ‬סיפוק )‪ – )Satisfaction‬כמה נוח להשתמש בעיצוב?‬

‫אחת הדרכים לבחון את רמת השימושיות היא דרך מבחנים הנקראים "מבחני שימושיות" )‪(Usability Tests‬‬

‫‪Usability‬‬ ‫מבחני שימושיות‬ ‫טכניקה להערכת מוצר על ידי בדיקתו על משתמשים‪,‬‬ ‫בסוציולוגיה של הטכנולוגיה נהוג לסווג שלושה סוגי משתמשים הקשורים בתהליך העיצוב )תיאורית ‪: (SCOT‬‬ ‫‪ ‬מדומיינים )‪ – )Projected‬המשתמשים כפי שמעצב המוצר )מהנדס‪ ,‬ממציא‪ ,‬מעצב גרפי וכו'( מדמיין אותם‪.‬‬ ‫במקרה של ממציאים נפוץ שהמשתמש המדומיין הוא בדמותו של הממציא )‪(I methodology‬‬

‫‪ ‬מיוצגים )‪ – )Represented‬המשתמשים שנבחרים לייצג את המשתמש האמיתי‪.‬‬ ‫כאשר מבצעים מבחני שימושיות או סקרי מוצר‪ ,‬בוחרים נציגים מדגמיים שאמורים לייצג את המשתמש האמיתי‬ ‫בין אם על סמך פקטורים אתנוגרפיים או קוגנטיביים‪.‬‬ ‫במקרים של מוצרים חדשים אין דרך להימנע מהקטגוריה הזו משום שאין עדיין משתמשים אמיתיים‪.‬‬

‫‪ ‬אמיתיים )‪ – )Actual‬המשתמשים למעשה‪.‬‬ ‫ניתן לגייס אותם על סמך שימוש קודם במוצר‪ ,‬במקרים של אתרים ניתן דרך הזמנה קופצת‪ ,‬פנייה באימייל וכו'‪.‬‬

‫הבחינה מורכבת ממדגם של בד"כ ‪ 6-10‬משתמשים מיוצגים‪,‬‬ ‫היא כוללת רשימת משימות )‪ (Scenarios‬הניתנות למשתמשים ונערכת במעבדת שימושיות‪.‬‬

‫‪UCD‬‬

‫‪ – User Centered Design‬עיצוב ממוקד משתמש‪.‬‬

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

‫‪Build/Test‬‬

‫‪Ship‬‬

‫‪Programmers‬‬

‫‪Designers‬‬

‫‪Look & Feel‬‬

‫‪Ship‬‬ ‫‪User‬‬

‫‪Usability Tests‬‬

‫‪Ship‬‬

‫‪Build/Test‬‬

‫‪QA‬‬

‫‪Programmers‬‬

‫‪Test‬‬

‫‪Managers‬‬

‫‪Initiate‬‬

‫‪Managers‬‬

‫‪Initiate‬‬

‫‪Build‬‬

‫‪User‬‬

‫‪User‬‬

‫‪Prototypes‬‬

‫‪Research / Spec‬‬

‫‪UI‬‬

‫טבלאות אינטראקציה‬

‫טבלאות המתייחסות לכל אובייקט בדף ומגדירות מה יקרה בעת אינטראקציה עם האובייקט‪:‬‬ ‫אובייקט ‪ -‬תיאור האובייקט בעמוד שאותו אנחנו רוצים להגדיר ולעצב את האינטראקציה שלו‬ ‫מצב ‪ -‬מה המצב שבו נמצאת המערכת )האתר‪ ,‬התוכנה וכו'( ברגע שאנחנו מתארים את האובייקט‬ ‫פעולה – מה ה – ‪ Input‬שאנחנו מכניסים לתוך המערכת‬ ‫בדיקה – שלב ביניים בין ה ‪Input‬ל ‪ ,Output‬תיאור תהליך שקורה מ"אחורי הקלעים" של המערכת‬ ‫תוצאת בדיקה חיובית ‪ -‬מה הפלט )‪ (Out put‬במקרה שהבדיקה שנעשתה מאחורי הקלעים חיובית‪ ,‬ז"א התשובה לשאלת הבדיקה היא "כן"‪.‬‬ ‫תוצאת בדיקה שלילית ‪ -‬מה הפלט )‪ (Out put‬במקרה שהבדיקה שנעשתה מאחורי הקלעים שלילית‪ ,‬ז"א התשובה לשאלת הבדיקה היא "לא"‪.‬‬

Usability Software - ‫מעבדת שימושיות‬

Usability Jakob Nielsen