Download
1 / 52
520 likes | 713 Vues
ממשק משתמש - GUI. הבנת ממשקי משתמש ועקרונות עיצובם. מציג: אופיר ויינשטיין, יועץ לניהול ידע. www.kmrom.com 2know.kmrom.com. נושאי המצגת. מהו ממשק משתמש חשיבותו של ממשק משתמש טעויות נפוצות בבניית ממשק המודל המנטאלי עקרונות הממשק היעיל הענקת תחושת שליטה למשתמש שימושיות הממשק עקביות
E N D
ממשק משתמש - GUI הבנת ממשקי משתמש ועקרונות עיצובם מציג: אופיר ויינשטיין, יועץ לניהול ידע www.kmrom.com 2know.kmrom.com
נושאי המצגת מהו ממשק משתמש חשיבותו של ממשק משתמש טעויות נפוצות בבניית ממשק המודל המנטאלי עקרונות הממשק היעיל הענקת תחושת שליטה למשתמש שימושיות הממשק עקביות פשטות היררכיה GRID סריקת תכנים עיצוב ניווט עיצוב קונספטואלי רזולוציה בדיקות
אמא של מי יודעת לתפעל Command Line ?
ממשק משתמש • שיפור האינטראקציה בין המשתמש למחשב • הקשר בין ארכיטקטורת המידע לשימושיות שימושיות כלי המאפשר למשתמשים בו להשיג מטרה באופן יעיל
שימושיות כלי המאפשר למשתמשים בו להשיג מטרה באופן יעיל
חשיבותו של ממשק – סיפור מקרה הבחירות לנשיאות בארה"ב – שנת 2001 • המתמודדים המרכזיים: ג'ורג' בוש, אל גור ופט ביוקנן • הקרב הצמוד בין בוש לאל גור מגיע לפלורידה • התוצאה בפלורידה עלולה להיות זאת שתכריע את הכף
מספר גדול של הצבעות הולך לפט ביוקנן במקום לאל גור • מספר גדול במיוחד של טפסים פסולים • השאר הוא היסטוריה....
טעויות נפוצות • משתמשים לא משולבים בכל שלבי הפיתוח • אין התייחסות למגבלות משתמשים • אנחנו מנסים לרצות את כולם • בניית תוכנה או אתר מכווני טכנולוגיה ולא מכווני משתמשים
מה משיגים מהשקעה בממשק • שיפור אפקטיביות המשתמשים • קיצור זמני למידה • צמצום שגיאות משתמש • העלאה יצרניות • הגברת אמון במערכת • הגברת שביעות רצון
המודל המנטאלי ומודל המערכת כיצד המשתמש תופס את הדרך בה המערכת אמורה לעבוד ? כיצד המערכת עובדת בפועל !
ממשק אפקטיבי = דברים עובדים כפי שהמשתמש מניח שהם יעבדו
פרסונה לדוגמה הפרסונה מייצגת את קהל היעד אשר ישתמש בפורטל • שם:אמירית בלומבאום • גיל:19.5 • מצב משפחתי:הקטנה מתוך 3 אחים2 האחים הגדולים, האחד כטייס והשני בשייטת 13 • רקע: אמירית התקבלה לקורס טייס בסינון מוקדם אך נפלה כתוצאה מהפגנת רוח קרבית יתר על המידה. כיום מפקדת על חטיבת צנחנים 3877. תחביבים: קרבות בעורף האויב, קראטה, קריאת סיפורי מקרה,ספרי אסטרטגיה, ביוגרפיות של מפקדים גדולים ומקרמה. מבלה כל יום שעתיים בחדר כושר ושעה בג'וגינג. אוכלת בעיקר מנות קרב וסושי (שהיא מכינה לבד) יש לה מחשב צבאי וסיווג בטחוני גבוה, יודעת להשתמש בו בעיקר לקריאת חדשות, מסמכים ותקשור עם המטכ"ל.
שיקולים בהגדרת ממשק משתמש יעיל • ייתן יותר • תוצאות – מה שאני רוצה, איך שאני רוצה,איפה שאני רוצה. • מהירות – טכנולוגית (חומרה ותוכנה), קוגניטיבית (אני מקבל מה שאני רוצה ללא צורך "לחפש" באפליקציה) • תחושת שליטה – אני שולט על התהליכים באפליקציה. • ידרוש פחות • מאמץ ויזואלי \ מחשבתי • עומס על הזיכרון • מאמץ פיזי \ מוטורי
כיצד מעניקים תחושת שליטה • התאמת המערכת למודל המנטאלי ולציפיותיו של המשתמש • לתת למשתמש אינדיקציות ברורות לגבי: • מיקומו במערכת (מאיפה הגיע ולאן הוא יכול להמשיך) • הפעולות שהוא יכול לבצע • מתן הנחיות ברורות • מתן "מרחב בטוח" לטעויות • ביטול \ שיחזור פעולות (undo\redo) • גרסאות • ולידציה של טפסים – לא קיים בכל המערכות
“Get In, Get It, Get Out!” Jacob Neilsen
שימושיות וממשק למשתמשהכללים לממשק גראפי איכותי
עקביות • עקביות חיצונית – התאמה למודל המנטאלי של המשתמש • סוג העבודה • עולם המושגים • ציפיות • תרבות ומוסכמות חברתיות • עקביות פנימית – בתוך האפליקציה • הפעלת חוקים אחידים על כל רכיבי המערכת • הנחיות אחידות לביצוע פעולות • דפוסי ניווט והפעלה קבועים • חריגה מן המוסכמות רק אם יש בזאת תועלת למשתמש
? ? ? ? ? ? עקביות – דוגמה (מה הוא לינק?)
עקביות – על שום מה ולמה? • למה זה חשוב? • נוחות • יעילות • רושם • על מה צריך להקפיד? • סטנדארטיזציה • קונסיסטנטיות
שאלה לדיון: איך לדעתכם ניתן ליישם עקביות כבר מתחילת תהליך העבודה ?
פשטות K.I.S.S
פשטות – על שום מה ולמה? • למה זה חשוב ? • פשוט = קל ונוח = מערכת טובה למשתמש • על מה צריך להקפיד? • צמצום הרכיבים • פונקציונאליות • פישוט תהליכים • היצמדות לקונוונציות
! ? ? היררכיה – אתרים בעברית כקוראי עברית, תמיד נתמקד קודם בפינה העליונה הימנית ומשם נמשיך שמאלה ולמטה, ככל שפריט הידע ממוקם למטה ושמאלה כך הסיכוי כי נקלוט אותו קטן
היררכיה – על שום מה ולמה? • למה זה חשוב ? • לוודא שהמשתמש יאתר מהר את מה שהוא רוצה • לקדם תכנים חשובים למערכת • על מה צריך להקפיד? • בדיקה ותעדוף (צרכי ההנהלה, צרכי המשתמשים, רצונות המשתמשים, תכני המערכת) • הקפדה על פריסה: חשוב = יותר גדול, גבוה במסך וקרוב יותר לימין (בעברית)
רשת – על שום מה ולמה? • למה זה חשוב ? • מימוש הכללים הקודמים - עקביות, פשטות, ותצוגה היררכית • יוצר סדר ושומר על נוחות השימוש ואסתטיקה • בסיס נוח לפיתוח עתידי • על מה צריך להקפיד ? • ב- Style Guide צריך להגדיר grid ברור, פשוט היררכי וקונסיסטנטי. • שמירה קפדנית בכל מסכי המערכת. • גודל קבוע של התכנים בכל איזור
סריקת תכנים עקרונות
RTFM: 5 שאלות פשוטות לא • האם משתמשים קוראים הנחיות? • האם משתמשים קוראים קבצי עזרה? • האם משתמשים קוראים עזרה מכוונת? • האם משתמשים קוראים הודעות קופצות ועזרה על המסך? • האם המשתמשים מתקשרים ל:"אחד שיודע"? לא לא לא
עצב אתהמערכתכךשתידרש כמה שפחות קריאה !
עקרונות לסריקת תכנים מהירה • המשתמש צריך להבין במבט ראשון מה מוצג לפניו • השתמש בכותרות קצרות וענייניות • השתמש בטקסטים קצרים (20 מילים, 6 משפטים) • הצג נושאים כרשימה אנכית • המנע מעגה (זַ'רְגוֹן)
זיהוי צרכי המשתמש • עצב את האתר בתהליך של ניסוי ובדיקה מול המשתמשים • איסוף המידע מכל מקור אפשרי (פניות לתמיכה, סקר משתמשים, אנשי מכירות, פורומים, קבוצות מיקוד, תשאול)
עיצוב טקסט טקסט שחור על רקע בהיר טקסט כהה על רקע כהה טקסט כהה על רקע כהה טקסט כהה על רקע כהה טקסט כהה על רקע כהה טקסט כהה על רקע כהה טקסט טקסט שחור על רקע בהיר טקסט שחור על רקע בהיר טקסט שחור על רקע בהיר טקסט שחור על רקע בהיר טקסט שחור על טקסט כהה על רקע בהיר טקסט כהה על רקע בהיר טקסט כהה על רקע בהיר טקסט כהה על רקע בהיר טקסט כהה על רקע בהיר טקסט טקסט בהיר על רקע בהירטקסט בהיר על רקע בהיר טקסט בהיר על רקע בהיר טקסט בהיר על רקע בהיר
תמונות יש לעשות שימוש בתמונות רקע פשוטות !
תמונות אין "לרצף" את הרקע בתמונות !
קישורים – יתרון הקישור הטקסטואלי • זיהוי מהיר • טעינה מהירה • Visited Link • תמיד נראים • SEO – Search Engine Optimization • פענוח בסריקה • שכפול מהיר
עיצוב דף הבית תן למשתמש מה שהוא מצפה לו • קישורים מרכזיים • חיפוש • קישור לאינדקס או מפת אתר • גרפיקה מייצגת (לוגו חברה +גרפיקת כותרת) • חדשות
אין להציג אינפורמציה חיונית בצורה שמזכירה באנר
טיפוסי ניווט חופשי מודל העץ מודל הכוכב מודל הרשת
שובל פירורים (Bread Crumbs) נתיב גישה לעמוד הנוכחי המאפשר גישה ליניארית גמישה לענף ממנו באנו • יתרונות • תצוגה ברורה של מיקום המשתמש במערכת • ניווט ליניארי כאופציה • דורש מעט מקום • זול למימוש • חסרונות • עשוי לבלבל • משתמש בלתי מנוסה עלול לפספס את הפונקציה מצגת ממשק משתמש >ניווט >שובל פירורים (אתה נמצא כאן)
טאבים • ניווט בין הדפים השונים על ידי יצירת הקשר מלאכותי בצורת מעבר בין כרטיסיות למה? מטאפורה ברורה גם למשתמשים לא מנוסים מאפשר ניווט חופשי יחד עם אינדיקציה ברורה של מיקום מאפשר למשתמשים להיחשף לאופציות הזמינות בכל רגע
לימוד השוק מה קיים מה רלבנטי מבנה ותצורה מבנה מעטפת Layout מסכים (Grid) מסגרת ניווט אזורי תוכן ותצוגת רכיבים טקסט וכותרות הגדרות רקע קהל יעד מטרה מאפיינים ומגבלות הגדרת סביבת העבודה סביבת הפיתוח והתקנים הבנת מגבלות סביבת הפיתוח מאפייני תכנים ומותג עיצוב קונספטואלי
בריטניה הולנד 58.90% 1024 x 768 15.38% 800x600 57.49% 1024 x 768 15.38% 800 x 600 גרמניה 18.67% 1280 x 1024 12.90% 1280 x 1024 51.08% 1024 x 768 9.75% 800 x 600 4.07% 1280 x 800 24.88% 1280 x 1024 4.11% 1280 x 800 3.08% 1152 x 864 5.70% 1280 x 800 3.96% 1152 x 864 5.48% 800 x 600 5.48% 800x600 4.98% 1152 x 864 9.75% 800x600 רזולוציה • הרזולוציה המומלצת לשימוש היום היא 768X1024 • סטטיסטיקות שימוש ברזולוציות (אירופה) 12.90% 1280 x 1024 24.88% 1280 x 1024 18.67% 1280 x 1024
