Hghgh - PowerPoint PPT Presentation

Slide1 l.jpg
Download
1 / 119

jhjhjh

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

Download Presentation

hghgh

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Slide1 l.jpg

אפיון ממשק וחווית משתמש

2011

שיעור ראשון


Slide2 l.jpg

שלום לכולם


Slide3 l.jpg

מי אנחנו?

ליאור יאיר

ראש תחום חווית משתמש

  • עתודאי בוגר ממר"ם

  • נציג ארגון IXDA בישראל

  • ממקימי ארגון UXI

  • חוקר Eyetracking


Slide4 l.jpg

  • מי אנחנו?

רן לירון

מאפיין ממשק בכיר

  • 15 שנות ניסיון באפיון, עיצוב ופיתח ממשקים

  • מפתח קורסי ממשק וחווית משתמש

  • ממקימי ארגון UXI


Slide5 l.jpg

מי אתם?


Slide6 l.jpg

מי אנחנו

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


Slide9 l.jpg

על הקורס


Slide10 l.jpg

המטרות שלנו

מה נראה היום?

  • קורס מקיף שיספק הבנה מעמיקה

  • לצד כלים פרקטים לאפיון ממשק וחווית משתמש.

  • חווית משתמש טובה בכל שיעור

  • ושיעור.


Slide11 l.jpg

קצת על הקורס

מה נראה היום?

f

  • קבוצת פייסבוק לתלמידים בלבד

  • מטלות שבועיות משיעור לשיעור

  • חוברות מודפסות בכל שיעור

  • משוב סדיר בכל שני שיעורים

  • (החל מהשיעור הבא...)


Slide12 l.jpg

מרצים אורחים

מה נראה היום?

  • מורן מלמד

  • מנהלת אתר האינטרנט orange.co.il

  • גיל פארן

  • מנהל תחום חוויית משתמש, בנק הפועלים

  • גדי להב

  • סמנכ"ל תוכן ועורך ראשי, אתרי קבוצת הארץ

  • גל מור

  • בעל הבלוג "חורים ברשת"


Slide13 l.jpg

מהי חווית משתמש?


Slide14 l.jpg

חווית משתמש?

מה נראה היום?

מכלול ההתנסות

חברה | שירות | מוצר


Slide15 l.jpg

קצת הסטוריה


Slide16 l.jpg

"בראשית היו המכונות..."


Slide19 l.jpg

  • שאלות החוקרים

מה נראה היום?

  • מה הן המגבלות האנושיות?


Slide20 l.jpg

  • שאלות החוקרים

מה נראה היום?

  • איך ניתן לעצב לשימוש יעיל,

  • למרות המגבלות?


Slide21 l.jpg

האבולוציה

מה נראה היום?

שנות התשעים

שנות השבעים

שנות השישים

  • GUI

  • UI Designer

  • UX Designer

  • IxD | IA

  • MMI (HMI)

  • CHI

  • HCI

  • ארגונומיה

  • הנדסת גורמי אנוש


Slide22 l.jpg

Don Norman

מה נראה היום?

  • ארכיטקט חוויית משתמש

  • חוקר וסופר מוכר בתחום הפסיכולוגיה הקוגניטיבית

  • שטבע את המונח לראשונה בהגדרת התפקיד שלו

  • בחברת Apple ב-1995.


Slide23 l.jpg

אפיון אל מול עיצוב

מה נראה היום?

V

s


Slide24 l.jpg

מי עוסק בחווית משתמש?


Slide25 l.jpg

התפקיד אחד, שמות רבים

מה נראה היום?

מאפיין, ארכיטקט מערכות, מעצב GUI, מעצב UI, איש UX,

מעצב חווית משתמש, מומחה ממשק משתמש, מומחה חווית משתמש, מומחה שימושיות,

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


Slide26 l.jpg

מעגלים מקצועיים

מה נראה היום?

המעגל הפנימי

מומחים העוסקים באפיון ועיצוב

מממשקים.

עוסקים ישירות בתחום

מאפיינים

מעצבים


Slide27 l.jpg

מעגלים מקצועיים

מה נראה היום?

המעגל השני

  • בעלי מקצוע העובדים ישירות מול

  • מאפייני ומעצבי הממשק, ומשפיעים על

  • האופן בו מתנהל אפיון ועיצוב הממשק.

  • עוסקים בתחומים משיקים ומנהלים

  • ישירים

מנהלי תחום אינטרנט

מנתחי מערכות

אנשי תוכן

מפתחים

מנהלי פרויקטים

אנשי קידום


Slide28 l.jpg

מעגלים מקצועיים

מה נראה היום?

המעגל החיצוני

  • בעלי אתרים, חברות פיתוח,

  • חברות מוצר...

  • לקוחות

ארגונים

יזמים


Slide29 l.jpg

למה משתלם להשקיע בחווית המשתמשים?


Slide30 l.jpg

ROI

מה נראה היום?

Return

On

Investment

ROI


Slide31 l.jpg

החזר השקעה

מה נראה היום?

  • השקעה של 10% מתקציב הפיתוח בשיפור הממשק מניב

  • שיפור ממוצע בהכנסות של ...?

  • 10%

  • מתקציב הפיתוח

  • ?


Slide32 l.jpg

החזר השקעה

מה נראה היום?

מחקר שערך ג'יקוב נילסן בשנת 2008 הראה כי:

  • השקעה של 10% מתקציב הפיתוח בשיפור הממשק מניב

  • שיפור ממוצע בהכנסות של 83% (!)

  • 83

  • 10


Slide33 l.jpg

  • ROI

מה נראה היום?

שאלה לדיון

  • מהיכן מגיע ההחזר על ההשקעה

  • בממשק?


Slide34 l.jpg

החזר השקעה

מה נראה היום?

מהיכן מגיע ההחזר על ההשקעה בממשק?

  • הגדלה באפקטיביות של המשתמשים.

  • יצירת אמון.

  • צמצום זמן הלימוד במערכת למשתמשים חדשים.

  • צמצום טעויות.

  • הקלה בשיווק ובמכירות.


Slide35 l.jpg

מרכיבי חווית המשתמש


Slide36 l.jpg

  • שליטת

  • משתמש

נגישות

זמינות המידע

  • שמישות

אסטטיקה

הנאה

שימושיות


Usability l.jpg

שמישותUsability


Slide38 l.jpg

שמישות

  • האם ניתן להשתמש במערכת?

  • האם נוח להשתמש במערכת?

  • האם נעים להשתמש המערכת?


Slide39 l.jpg

מדדי השמישות העיקריים

יעילות ((efficiencyכמה מאמץ ומשאבים נדרשים מהמשתמש -

  • זמן

  • שימוש במקלדת ועכבר

  • מאמץ הקוגניטיבי

  • מאמץ פיזי

  • ...


Slide40 l.jpg

מדדי השמישות העיקריים

תועלת (Effectiveness)

  • האם המערכת מפיקה בדיוק את התוצאה הנדרשת?

  • האם היא מספקת ערכים מוספים כלשהם?


Slide41 l.jpg

מדדי השמישות העיקריים

עקומת למידה

כמה זמן ומאמץ נדרש בכדי להבין כיצד להשתמש במערכת באופן אפקטיבי


Slide42 l.jpg

מדדי השמישות העיקריים

התמודדות עם טעויות משתמשים

  • מניעת טעויות

  • סיוע בהתאוששות מטעויות


Slide43 l.jpg

מדדי השמישות העיקריים

סיפוקSatisfaction) )

מה החוויה הסובייקטיבית של המשתמשים?

האם הם מרוצים, מבולבלים, חווים תסכול או נהנים?


Slide44 l.jpg

סיכום: מדדי השמישות העיקריים

  • יעילות (efficiency)

  • תועלת (Effectiveness )

  • עקומת למידה

  • מניעת טעויות משתמשים והתאוששות מטעויות

  • סיפוק (Satisfaction)


Slide45 l.jpg

בעיית שמישות לדוגמה

Office 2007

Office 2010

Where the **** ismy “File” Menu ?!


Slide46 l.jpg

בעיית שמישות לדוגמה

?


Usefulness value l.jpg

שימושיותUsefulness, Value


User control l.jpg

שליטת משתמשUser Control


Slide49 l.jpg

מה נראה היום?

שאלה לדיון

  • למה חיוני לספק למשתמש

  • תחושת שליטה?


Slide50 l.jpg

משתמשים רוצים להרגיש בשליטה

למה חיוני לספק למשתמשים תחושת שליטה?

  • להקטין חשש משימוש במערכת

  • לבנות אמון

  • לספק חווית שימוש טובה


Slide51 l.jpg

כיצד לספק תחושת שליטה?

התאמת המערכת לניסיון הקודם ולעולמות התוכן שהמשתמשים מכירים

לדוגמה:

  • מה משמעות הצבעים אדום וירוק?

  • מה משמעות הצבעים אדום וירוק עבור סוכן בורסה?


Slide52 l.jpg

כיצד לספק תחושת שליטה?

תצוגה ברורה של מיקום המשתמש בתהליך העובדה

  • איפה אני נמצא?

  • להיכן אני יכול להתקדם מכאן?

  • מה אני יכול לעשות כאן

  • כיצד אני יכול לחזור למקום ממנו באתי?

  • לדוגמה...


Slide53 l.jpg

כיצד לספק תחושת שליטה?

מיקום המשתמש - דוגמה


Slide54 l.jpg

כיצד לספק תחושת שליטה?

מניעת טעויות ע"י הנחיות ברורות

http://www8.hp.com/us/en/support-drivers.html


Slide55 l.jpg

נגישות


Slide56 l.jpg

נגישות

נגישות: התאמת ממשק למשתמשים בעלי לקויות

  • מי כאן מגדיר את עצמו "משתמש בעל לקויות" ?

  • אילו לקויות?

  • איזה אחוז מהמשתמשים הינו "משתמשים בעלי לקויות"?

  • האם החוק הישראלי מחייב התאמת אתרים למשתמשים בעלי לקויות?

  • דוגמהלבעיה:


Slide57 l.jpg

אסתטיקה


Slide59 l.jpg

אסתטיקה


Slide60 l.jpg

אסתטיקה


Findability l.jpg

זמינות המידעFindability


Slide62 l.jpg

כמה פשוט למשתמש לאתר מידע

נגישות: התאמת ממשק למשתמשים בעלי לקויות

  • מי כאן מגדיר את עצמו "משתמש בעל לקויות" ?

  • אילו לקויות?

  • איזה אחוז מהמשתמשים הינו "משתמשים בעלי לקויות"?

  • האם החוק הישראלי מחייב התאמת אתרים למשתמשים בעלי לקויות?

  • דוגמהלבעיה:


Slide63 l.jpg

הנאה


Slide64 l.jpg

הנאה לפעולה

מה נראה היום?


Slide65 l.jpg

הנאה לפעולה

מה נראה היום?

לא כיף!


Slide66 l.jpg

הנאה לפעולה

מה נראה היום?


Slide67 l.jpg

הנאה לפעולה

מה נראה היום?


Slide68 l.jpg

הנאה לפעולה

מה נראה היום?


Slide69 l.jpg

יתרונות ממשק מהנה

מה נראה היום?

  • משתמשים נוטים לגלות סלחנות כשהם נהנים.

  • התאהבות במערכת.

  • הנעה חזקה לפעולה.


Slide70 l.jpg

הנאה לפעולה

מה נראה היום?

  • “Fun is the easiest way to

  • change people’s behavior”


Slide71 l.jpg

הנאה לפעולה

מה נראה היום?

  • הנאה = הנעה


Slide72 l.jpg

בנק הפועלים | מצגת מחקר

עולם הבנקאות והפיננסים

5


Slide73 l.jpg

בנק הפועלים | מצגת מחקר

עולם הבנקאות והפיננסים

5


Slide74 l.jpg

בנק הפועלים | מצגת מחקר

עולם הבנקאות והפיננסים

5


Slide75 l.jpg

  • שליטת

  • משתמש

נגישות

זמינות המידע

  • שמישות

אסטטיקה

הנאה

שימושיות


Slide76 l.jpg

עקרונות בסיסיים לחווית משתמש טובה


Slide77 l.jpg

מודעות לקונבנציות


Slide78 l.jpg

מישהו יודע מה זה?איך משתמשים בזה?


Slide79 l.jpg

מחיר: 45 יורו


Slide80 l.jpg

מסחטת המיץ של דוד משוק הכרמל

מחיר: 10 שקלים (1+1)


Slide81 l.jpg

  • קונבנציות

מה נראה היום?

לדיון

  • למה חיוני להכיר את הקונבנציות?


Slide82 l.jpg

היתרונות לשמירה על קונבנציות

מה נראה היום?

  • הסתמכות על פתרונות שעובדים ונבדקו בעבר.

  • הסתמכות על למידה קודמת של המשתמשים.

  • צמצום טעויות.

  • חסכון בזמן בתהליכי האפיון, העיצוב והפיתוח.


Slide83 l.jpg

  • קונבנציות

מה נראה היום?

לדיון

  • מה החסרון בשמירה על

  • קונבנציות?


Slide84 l.jpg

מודעות לקונבנציות

מה נראה היום?


Slide85 l.jpg

מודעות לקונבנציות

מה נראה היום?


Slide86 l.jpg

מודעות לקונבנציות

מה נראה היום?


Slide87 l.jpg

מודעות לקונבנציות

מה נראה היום?


Slide88 l.jpg

למה לא לשמור על קונבנציות?

מה נראה היום?

  • חדשנות.

  • קונבנציות שלא עובדות (שמירה על טעויות).


Slide89 l.jpg

מודעות לקונבנציות

מה נראה היום?

שימו לב!

  • אנו חייבים לבחור את הקונבנציות המתאימות

  • למשתמשים שלנו.


Slide90 l.jpg

בחירת הקונבנציות הנכונות

מה נראה היום?

שימו לב!

  • אנו חייבים לבחור את הקונבנציות המתאימות

  • למשתמשים שלנו.

  • שם:

  • *


Slide91 l.jpg

בחירת הקונבנציות הנכונות

מה נראה היום?

שימו לב!

  • אנו חייבים לבחור את הקונבנציות המתאימות

  • למשתמשים שלנו.

  • Name:

  • ((mandatory


Slide92 l.jpg

שבירת קונבנציות | feta

מה נראה היום?


Slide93 l.jpg

שבירת קונבנציות | קלמנטינה

מה נראה היום?


Slide94 l.jpg

עקביות


Slide95 l.jpg

עקביות

מה נראה היום?


Slide96 l.jpg

עקביות

מה נראה היום?


Slide97 l.jpg

עקביות

מה נראה היום?


Slide98 l.jpg

יתרונות הממשק העקבי

מה נראה היום?

  • מניעת תסכול ובלבול.

  • מאפשר למשתמשים ללמוד ולהבין את המערכת.

  • צמצום טעויות.

  • ייעול האפיון והפיתוח.


Slide99 l.jpg

יצירת ממשק עקבי

מה נראה היום?

1

  • אובייקטים דומים צריכים להתנהג ולהראות דומה.

  • אובייקטים בעלי פונקציונאליות או תוכן שונה

  • צריכים להיראות שונים בבירור.

2


Slide100 l.jpg

עקביות

מה נראה היום?

דוגמה רעה


Slide101 l.jpg

פשטות


Slide102 l.jpg

פשטות

מה נראה היום?

  • "Keep it simple, Stupid!"

Kelly Johnson (engineer)


Slide103 l.jpg

יצירת ממשק פשוט

מה נראה היום?

שאלה לדיון

  • איך יוצרים ממשק פשוט?


Slide104 l.jpg

יצירת ממשק פשוט

מה נראה היום?

  • התאמה להרגלי משתמשים.

  • מינימליזם – מיעוט רכיבים, צמצום פונקציונאליות, צמצום צמתי החלטה.

  • עיצוב פשוט.


Slide105 l.jpg

עומס ויזואלי

מה נראה היום?

  • עומס ויזואלי


Slide106 l.jpg

עומס ויזואלי

מה נראה היום?

  • עומס ויזואלי


Slide107 l.jpg

קוים פשוטים פלטה נכונה

מה נראה היום?


Slide108 l.jpg

ריווח ועימוד

מה נראה היום?


Slide109 l.jpg

להכיר את המשתמשים

נעים מאוד


Slide110 l.jpg

מי מסתתר בצד השני?

מה נראה היום?


Slide111 l.jpg

אתם

לא

המשתמשים!


Redundancy l.jpg

גמישות ויתירות (Redundancy)


Slide113 l.jpg

גמישות ויתירות

מה נראה היום?

למשתמשים שונים יש הרגלי עבודה שונים.


Slide114 l.jpg

גמישות ויתירות

מה נראה היום?


Slide115 l.jpg

סיכום


Slide116 l.jpg

סיכום

מה נראה היום?

  • מהי "חווית משתמש" ומי עוסק בה

  • למה משתלם להשקיע בתחום

  • מרכיבי חוויית המשתמש

    • שמישות

    • שימושיות

    • שליטת משתמש

    • נגישות

    • אסתטיקה

    • זמינות המידע

    • הנאה

  • כללי יסוד לאפיון ממשק איכותי

    • עקביות

    • הכרת הקונבנציות

    • פשטות


Slide117 l.jpg

המטלה השבועית

מה נראה היום?

המטלה השבועית

למצוא דוגמה למערכת (אפליקציה, תוכנה,

אתר) שלא מתחשבת באחד או יותר מהכללים

שהצגנו בשיעור.

את המערכת יש לפרסם בקבוצת הקורס בפייסבוק

בצירוף הסבר לבעיה.


Slide118 l.jpg

תודה :)


  • Login