Download - ממשק משתמש - GUI
![Page 1: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/1.jpg)
GUIממשק משתמש -
הבנת ממשקי משתמש ועקרונות אופיר ויינשטיין, יועץ לניהול ידעמציג: עיצובם
www.kmrom.com2know.kmrom.com
![Page 2: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/2.jpg)
נושאי המצגת
מהו ממשק משתמשחשיבותו של ממשק משתמשטעויות נפוצות בבניית ממשק
המודל המנטאליעקרונות הממשק היעיל
הענקת תחושת שליטה למשתמששימושיות הממשק
עקביותפשטותהיררכיהGRID
סריקת תכניםעיצובניווט
עיצוב קונספטואלירזולוציהבדיקות
![Page 3: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/3.jpg)
מונחי יסוד
![Page 4: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/4.jpg)
ויזואליזציה
Q1 Q2 Q3 Q4
יעילות 19.5 24.6 10.3 33.2
איכות השירות 56 65 73 89
רווחים 43 44 39 54 0
10
20
30
40
50
60
70
80
90
100
Q1Q2Q3Q4
0
10
20
30
40
50
60
70
80
90
100
Q1Q2Q3Q4
![Page 5: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/5.jpg)
אמא של מי יודעת לתפעלCommand Line
?
![Page 6: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/6.jpg)
ממשק משתמש
שיפור האינטראקציה בין המשתמש למחשב
הקשר בין ארכיטקטורת המידע לשימושיות
שימושיות
כלי המאפשר למשתמשים בו להשיג מטרה באופן יעיל
![Page 7: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/7.jpg)
שימושיות
כלי המאפשר למשתמשים בו להשיג מטרה באופן יעיל
![Page 8: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/8.jpg)
חשיבותו של ממשק – סיפור מקרה
2001הבחירות לנשיאות בארה"ב – שנת
המתמודדים המרכזיים: ג'ורג' בוש, אל גור ופט ביוקנן
הקרב הצמוד בין בוש לאל גור מגיע לפלורידה
התוצאה בפלורידה עלולה להיות זאת שתכריע את הכף
![Page 9: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/9.jpg)
חשיבותו של ממשק – סיפור מקרה
![Page 10: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/10.jpg)
מספר גדול של הצבעות הולך לפט ביוקנן במקום לאל גור
מספר גדול במיוחד של טפסים פסולים
השאר הוא היסטוריה....
![Page 11: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/11.jpg)
טעויות נפוצות
שלבי הפיתוחבכלמשתמשים לא משולבים
אין התייחסות למגבלות משתמשים
כולםאנחנו מנסים לרצות את
בניית תוכנה או אתר מכווני טכנולוגיה ולא מכווני משתמשים
![Page 12: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/12.jpg)
דברים יפים עובדים טוב יותר
!
![Page 13: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/13.jpg)
מה משיגים מהשקעה בממשק
שיפור אפקטיביות המשתמשים
קיצור זמני למידה•צמצום שגיאות משתמש•
העלאה יצרניות•הגברת אמון במערכת•
הגברת שביעות רצון•
![Page 14: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/14.jpg)
המודל המנטאלי ומודל המערכת
כיצד המשתמש תופס את הדרך בה המערכת אמורה
לעבוד
כיצד המערכת עובדת בפועל
!
?
![Page 15: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/15.jpg)
ממשק אפקטיבי=
דברים עובדים כפי שהמשתמש מניח שהם יעבדו
![Page 16: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/16.jpg)
פרסונה לדוגמההפרסונה מייצגת את קהל היעד אשר ישתמש בפורטל
שם: אמירית בלומבאום 19.5גיל:
אחים3מצב משפחתי:הקטנה מתוך האחים הגדולים, האחד כטייס 2
13והשני בשייטת
רקע:אמירית התקבלה לקורס טייס בסינון מוקדם אך נפלה כתוצאה מהפגנת רוח קרבית
יתר על המידה.. 3877כיום מפקדת על חטיבת צנחנים
תחביבים: קרבות בעורף האויב, קראטה, קריאת סיפורי מקרה,ספרי אסטרטגיה, ביוגרפיות
של מפקדים גדולים ומקרמה.מבלה כל יום שעתיים בחדר כושר ושעה בג'וגינג.
אוכלת בעיקר מנות קרב וסושי )שהיא מכינה לבד(יש לה מחשב צבאי וסיווג בטחוני גבוה, יודעת להשתמש בו בעיקר לקריאת חדשות,
מסמכיםותקשור עם המטכ"ל.
![Page 17: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/17.jpg)
עקרונות ממשק משתמש יעיל
![Page 18: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/18.jpg)
שיקולים בהגדרת ממשק משתמש יעיל
ייתן יותר – מה שאני רוצה, איך שאני רוצה,איפה תוצאות
שאני רוצה. – טכנולוגית )חומרה ותוכנה(, קוגניטיבית מהירות
)אני מקבל מה שאני רוצה ללא צורך "לחפש" באפליקציה(
– אני שולט על התהליכים תחושת שליטהבאפליקציה.
ידרוש פחותמאמץ ויזואלי \ מחשבתי
עומס על הזיכרוןמאמץ פיזי \ מוטורי
![Page 19: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/19.jpg)
כיצד מעניקים תחושת שליטה
התאמת המערכת למודל המנטאלי ולציפיותיו של המשתמש
לתת למשתמש אינדיקציות ברורות לגבי:מיקומו במערכת )מאיפה הגיע ולאן הוא יכול להמשיך(
הפעולות שהוא יכול לבצע
מתן הנחיות ברורות
מתן "מרחב בטוח" לטעויות(undo\redoביטול \ שיחזור פעולות )
גרסאות
ולידציה של טפסים – לא קיים בכל המערכות
![Page 20: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/20.jpg)
“Get In, Get It, Get Out!”Jacob Neilsen
![Page 21: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/21.jpg)
שימושיות וממשק למשתמשהכללים לממשק גראפי איכותי
![Page 22: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/22.jpg)
עקביות
עקביות חיצונית – התאמה למודל המנטאלי של המשתמש
סוג העבודה
עולם המושגים
ציפיות
תרבות ומוסכמות חברתיות
עקביות פנימית – בתוך האפליקציה
הפעלת חוקים אחידים על כל רכיבי המערכת
הנחיות אחידות לביצוע פעולות
דפוסי ניווט והפעלה קבועים
חריגה מן המוסכמות רק אם יש בזאת תועלת למשתמש
![Page 23: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/23.jpg)
עקביות – דוגמה )מה הוא לינק?(?
?
?
?
?
?
![Page 24: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/24.jpg)
עקביות – על שום מה ולמה?
למה זה חשוב?נוחות
יעילות
רושם
על מה צריך להקפיד?סטנדארטיזציה
קונסיסטנטיות
![Page 25: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/25.jpg)
:שאלה לדיון
איך לדעתכם ניתן ליישם עקביות כבר
מתחילת תהליך העבודה
?
![Page 26: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/26.jpg)
פשטות
![Page 27: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/27.jpg)
פשטות – על שום מה ולמה?
למה זה חשוב ?
פשוט = קל ונוח = מערכת טובה למשתמש
על מה צריך להקפיד? צמצום הרכיבים
פונקציונאליות
פישוט תהליכים
לקונוונציותהיצמדות
![Page 28: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/28.jpg)
היררכיה – אתרים בעברית
!
? ?
כקוראי עברית, תמיד נתמקד קודם בפינה העליונה הימנית ומשם נמשיך שמאלה ולמטה, ככל שפריט הידע ממוקם למטה ושמאלה
כך הסיכוי כי נקלוט אותו קטן
![Page 29: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/29.jpg)
היררכיה – על שום מה ולמה?
למה זה חשוב ?שהוא רוצה את מה מהרלוודא שהמשתמש יאתר
למערכתלקדם תכנים חשובים
על מה צריך להקפיד? )צרכי ההנהלה, צרכי בדיקה ותעדוף
המשתמשים, רצונות המשתמשים, תכני המערכת(: חשוב = יותר גדול, גבוה הקפדה על פריסה
במסך וקרוב יותר לימין )בעברית(
![Page 30: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/30.jpg)
(GRIDרשת )
![Page 31: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/31.jpg)
איך נראית רשת של אפליקציה
![Page 32: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/32.jpg)
איך נראית רשת של אפליקציה
![Page 33: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/33.jpg)
רשת – על שום מה ולמה?
למה זה חשוב ? הקודמים - עקביות, פשטות, ותצוגה מימוש הכללים
היררכית
יוצר סדר ושומר על נוחות השימוש ואסתטיקה
לפיתוח עתידיבסיס נוח
על מה צריך להקפיד ? ברור, פשוט היררכי grid צריך להגדיר Style Guideב-
וקונסיסטנטי.
בכל מסכי המערכת.שמירה קפדנית
של התכנים בכל איזורגודל קבוע
![Page 34: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/34.jpg)
סריקת תכניםעקרונות
![Page 35: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/35.jpg)
RTFM: 5שאלות פשוטות
האם משתמשים קוראים הנחיות?
האם משתמשים קוראים קבצי עזרה?
האם משתמשים קוראים עזרה מכוונת?
האם משתמשים קוראים הודעות קופצות ועזרה על המסך?
האם המשתמשים מתקשרים ל:"אחד שיודע"?
לאלא
לאלא
![Page 36: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/36.jpg)
שתידרש כך המערכת עצב אתכמה שפחות קריאה
!
![Page 37: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/37.jpg)
עקרונות לסריקת תכנים מהירה
המשתמש צריך להבין במבט ראשון מה מוצג לפניו
השתמש בכותרות קצרות וענייניות
6 מילים, 20השתמש בטקסטים קצרים )משפטים(
הצג נושאים כרשימה אנכית
גֹון( Mר' Nהמנע מעגה )ז
![Page 38: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/38.jpg)
התהליך, העיצוב והמשתמש
![Page 39: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/39.jpg)
זיהוי צרכי המשתמש
עצב את האתר בתהליך של ניסוי ובדיקה מול המשתמשים
איסוף המידע מכל מקור אפשרי )פניות לתמיכה, סקר משתמשים, אנשי מכירות,
פורומים, קבוצות מיקוד, תשאול(
![Page 40: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/40.jpg)
עיצוב טקסט
טקסט שחור על רקע בהיר
טקסט שחור על רקע בהיר טקסט
שחור על רקע בהיר טקסט שחור
על רקע בהיר טקסט שחור על
רקע בהיר טקסט שחור על
טקסט כהה על רקע בהיר טקסט
כהה על רקע בהיר טקסט כהה על
רקע בהיר טקסט כהה על רקע בהיר
טקסט כהה על רקע בהיר טקסט
טקסט בהיר על רקע בהירטקסט
בהיר על רקע בהירטקסט בהיר על
רקע בהירטקסט בהיר על
רקע בהיר
טקסט כהה על רקע כהה טקסט
כהה על רקע כהה טקסט כהה על
רקע כהה טקסט כהה על רקע כהה
טקסט כהה על רקע כהה טקסט
![Page 41: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/41.jpg)
תמונות
יש לעשות שימוש בתמונות רקע פשוטות
!
![Page 42: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/42.jpg)
תמונות
אין "לרצף" את הרקע בתמונות
!
![Page 43: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/43.jpg)
קישורים – יתרון הקישור הטקסטואלי
זיהוי מהיר
טעינה מהירה
Visited Link
תמיד נראים
SEO – Search Engine Optimization
פענוח בסריקה
שכפול מהיר
![Page 44: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/44.jpg)
עיצוב דף הבית
קישורים מרכזיים
חיפוש
קישור לאינדקס או מפת אתר
גרפיקה מייצגת )לוגו חברה + גרפיקת כותרת(
חדשות
תן למשתמש מה שהוא מצפה לו
![Page 45: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/45.jpg)
אין להציג אינפורמציה חיונית בצורה שמזכירה באנר
![Page 46: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/46.jpg)
טיפוסי ניווט חופשי
מודל העץ מודל הכוכב
מודל הרשת
![Page 47: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/47.jpg)
(Bread Crumbsשובל פירורים )
יתרונותתצוגה ברורה של מיקום המשתמש במערכת
ניווט ליניארי כאופציהדורש מעט מקום
זול למימוש
חסרונותעשוי לבלבל
משתמש בלתי מנוסה עלול לפספס את הפונקציה
מצגת ממשק משתמש < ניווט < שובל פירורים )אתה נמצא כאן(
נתיב גישה לעמוד הנוכחי המאפשר גישה ליניארית גמישה לענף ממנו באנו
![Page 48: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/48.jpg)
טאבים
ניווט בין הדפים השונים על ידי יצירת הקשר מלאכותי בצורת מעבר בין כרטיסיות
מטאפורה ברורה גם למשתמשים לא מנוסים
מאפשר ניווט חופשי יחד עם אינדיקציה ברורה של מיקום
מאפשר למשתמשים להיחשף לאופציות הזמינות בכל רגע
?למה
![Page 49: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/49.jpg)
עיצוב קונספטואלי
לימוד השוקמה קיים
מה רלבנטי
מבנה ותצורהמבנה מעטפת
Layout( מסכים Grid)
מסגרת ניווט
אזורי תוכן ותצוגת רכיבים
טקסט וכותרות
הגדרות רקעקהל יעד
מטרה
מאפיינים ומגבלותהגדרת סביבת העבודה
סביבת הפיתוח והתקנים
הבנת מגבלות סביבת הפיתוח
מאפייני תכנים ומותג
![Page 50: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/50.jpg)
רזולוציההרזולוציה המומלצת לשימוש היום היא
768X1024
סטטיסטיקות שימוש ברזולוציות )אירופה(
הולנד
1152 x 8643.96%
1280 x 8004.11%
800 x 6009.75%
1280 x 102418.67%
1024 x 76857.49%
1152 x 8643.08%
1280 x 8004.07%
1280 x 102412.90%
800 x 60015.38%
1024 x 76858.90%
בריטניה
1152 x 8644.98%
800 x 6005.48%
1280 x 8005.70%
1280 x 102424.88%
1024 x 76851.08%
גרמניה15.38% 800x600
5.48% 800x600
9.75% 800x6009.75% 800x600
24.88% 1280 x 1024
12.90% 1280 x 1024
18.67% 1280 x 1024
![Page 51: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/51.jpg)
WEBקריטריונים לבדיקות -
בהירות הניווטהיכן אני נמצא ולאן אני יכול ללכת מכאן
חזרה לדף ראשיקישורים
וידוא תקינותאבחנה בין כתב לקישור
תקינות טפסיםהזנה תקינה
ולידציהחיפוש
שימוש פשוטאפשרות איתור
חיפוש אקטיבי )מכוון(
![Page 52: ממשק משתמש - GUI](https://reader035.vdocuments.site/reader035/viewer/2022062422/568137e6550346895d9f9483/html5/thumbnails/52.jpg)
תודה רבה על השתתפותכם
www.kmrom.com
2know.kmrom.com
אופיר ויינשטיין
054-2545-771