ממשק משתמש - GUI

GUIממשק משתמש -

הבנת ממשקי משתמש ועקרונות אופיר ויינשטיין, יועץ לניהול ידעמציג: עיצובם

www.kmrom.com2know.kmrom.com

נושאי המצגת

מהו ממשק משתמשחשיבותו של ממשק משתמשטעויות נפוצות בבניית ממשק

המודל המנטאליעקרונות הממשק היעיל

הענקת תחושת שליטה למשתמששימושיות הממשק

עקביותפשטותהיררכיהGRID

סריקת תכניםעיצובניווט

עיצוב קונספטואלירזולוציהבדיקות

מונחי יסוד

ויזואליזציה

  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

אמא של מי יודעת לתפעלCommand Line

?

ממשק משתמש

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

הקשר בין ארכיטקטורת המידע לשימושיות

שימושיות

כלי המאפשר למשתמשים בו להשיג מטרה באופן יעיל

שימושיות

כלי המאפשר למשתמשים בו להשיג מטרה באופן יעיל

חשיבותו של ממשק – סיפור מקרה

2001הבחירות לנשיאות בארה"ב – שנת

המתמודדים המרכזיים: ג'ורג' בוש, אל גור ופט ביוקנן

הקרב הצמוד בין בוש לאל גור מגיע לפלורידה

התוצאה בפלורידה עלולה להיות זאת שתכריע את הכף

חשיבותו של ממשק – סיפור מקרה

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

מספר גדול במיוחד של טפסים פסולים

השאר הוא היסטוריה....

טעויות נפוצות

שלבי הפיתוחבכלמשתמשים לא משולבים

אין התייחסות למגבלות משתמשים

כולםאנחנו מנסים לרצות את

בניית תוכנה או אתר מכווני טכנולוגיה ולא מכווני משתמשים

דברים יפים עובדים טוב יותר

!

מה משיגים מהשקעה בממשק

שיפור אפקטיביות המשתמשים

קיצור זמני למידה•צמצום שגיאות משתמש•

העלאה יצרניות•הגברת אמון במערכת•

הגברת שביעות רצון•

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

כיצד המשתמש תופס את הדרך בה המערכת אמורה

לעבוד

כיצד המערכת עובדת בפועל

!

?

ממשק אפקטיבי=

דברים עובדים כפי שהמשתמש מניח שהם יעבדו

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

שם: אמירית בלומבאום 19.5גיל:

אחים3מצב משפחתי:הקטנה מתוך האחים הגדולים, האחד כטייס 2

13והשני בשייטת

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

יתר על המידה.. 3877כיום מפקדת על חטיבת צנחנים

תחביבים: קרבות בעורף האויב, קראטה, קריאת סיפורי מקרה,ספרי אסטרטגיה, ביוגרפיות

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

אוכלת בעיקר מנות קרב וסושי )שהיא מכינה לבד(יש לה מחשב צבאי וסיווג בטחוני גבוה, יודעת להשתמש בו בעיקר לקריאת חדשות,

מסמכיםותקשור עם המטכ"ל.

עקרונות ממשק משתמש יעיל

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

ייתן יותר – מה שאני רוצה, איך שאני רוצה,איפה תוצאות

שאני רוצה. – טכנולוגית )חומרה ותוכנה(, קוגניטיבית מהירות

)אני מקבל מה שאני רוצה ללא צורך "לחפש" באפליקציה(

– אני שולט על התהליכים תחושת שליטהבאפליקציה.

ידרוש פחותמאמץ ויזואלי \ מחשבתי

עומס על הזיכרוןמאמץ פיזי \ מוטורי

כיצד מעניקים תחושת שליטה

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

לתת למשתמש אינדיקציות ברורות לגבי:מיקומו במערכת )מאיפה הגיע ולאן הוא יכול להמשיך(

הפעולות שהוא יכול לבצע

מתן הנחיות ברורות

מתן "מרחב בטוח" לטעויות(undo\redoביטול \ שיחזור פעולות )

גרסאות

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

“Get In, Get It, Get Out!”Jacob Neilsen

שימושיות וממשק למשתמשהכללים לממשק גראפי איכותי

עקביות

עקביות חיצונית – התאמה למודל המנטאלי של המשתמש

סוג העבודה

עולם המושגים

ציפיות

תרבות ומוסכמות חברתיות

עקביות פנימית – בתוך האפליקציה

הפעלת חוקים אחידים על כל רכיבי המערכת

הנחיות אחידות לביצוע פעולות

דפוסי ניווט והפעלה קבועים

חריגה מן המוסכמות רק אם יש בזאת תועלת למשתמש

עקביות – דוגמה )מה הוא לינק?(?

?

?

?

?

?

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

למה זה חשוב?נוחות

יעילות

רושם

על מה צריך להקפיד?סטנדארטיזציה

קונסיסטנטיות

:שאלה לדיון

איך לדעתכם ניתן ליישם עקביות כבר

מתחילת תהליך העבודה

?

פשטות

פשטות – על שום מה ולמה?

למה זה חשוב ?

פשוט = קל ונוח = מערכת טובה למשתמש

על מה צריך להקפיד? צמצום הרכיבים

פונקציונאליות

פישוט תהליכים

לקונוונציותהיצמדות

היררכיה – אתרים בעברית

!

? ?

כקוראי עברית, תמיד נתמקד קודם בפינה העליונה הימנית ומשם נמשיך שמאלה ולמטה, ככל שפריט הידע ממוקם למטה ושמאלה

כך הסיכוי כי נקלוט אותו קטן

היררכיה – על שום מה ולמה?

למה זה חשוב ?שהוא רוצה את מה מהרלוודא שהמשתמש יאתר

למערכתלקדם תכנים חשובים

על מה צריך להקפיד? )צרכי ההנהלה, צרכי בדיקה ותעדוף

המשתמשים, רצונות המשתמשים, תכני המערכת(: חשוב = יותר גדול, גבוה הקפדה על פריסה

במסך וקרוב יותר לימין )בעברית(

(GRIDרשת )

איך נראית רשת של אפליקציה

איך נראית רשת של אפליקציה

רשת – על שום מה ולמה?

למה זה חשוב ? הקודמים - עקביות, פשטות, ותצוגה מימוש הכללים

היררכית

יוצר סדר ושומר על נוחות השימוש ואסתטיקה

לפיתוח עתידיבסיס נוח

על מה צריך להקפיד ? ברור, פשוט היררכי grid צריך להגדיר Style Guideב-

וקונסיסטנטי.

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

של התכנים בכל איזורגודל קבוע

סריקת תכניםעקרונות

RTFM: 5שאלות פשוטות

האם משתמשים קוראים הנחיות?

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

האם משתמשים קוראים עזרה מכוונת?

האם משתמשים קוראים הודעות קופצות ועזרה על המסך?

האם המשתמשים מתקשרים ל:"אחד שיודע"?

לאלא

לאלא

שתידרש כך המערכת עצב אתכמה שפחות קריאה

!

עקרונות לסריקת תכנים מהירה

המשתמש צריך להבין במבט ראשון מה מוצג לפניו

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

6 מילים, 20השתמש בטקסטים קצרים )משפטים(

הצג נושאים כרשימה אנכית

גֹון( Mר' Nהמנע מעגה )ז

התהליך, העיצוב והמשתמש

זיהוי צרכי המשתמש

עצב את האתר בתהליך של ניסוי ובדיקה מול המשתמשים

איסוף המידע מכל מקור אפשרי )פניות לתמיכה, סקר משתמשים, אנשי מכירות,

פורומים, קבוצות מיקוד, תשאול(

עיצוב טקסט

טקסט שחור על רקע בהיר

טקסט שחור על רקע בהיר טקסט

שחור על רקע בהיר טקסט שחור

על רקע בהיר טקסט שחור על

רקע בהיר טקסט שחור על

טקסט כהה על רקע בהיר טקסט

כהה על רקע בהיר טקסט כהה על

רקע בהיר טקסט כהה על רקע בהיר

טקסט כהה על רקע בהיר טקסט

טקסט בהיר על רקע בהירטקסט

בהיר על רקע בהירטקסט בהיר על

רקע בהירטקסט בהיר על

רקע בהיר

טקסט כהה על רקע כהה טקסט

כהה על רקע כהה טקסט כהה על

רקע כהה טקסט כהה על רקע כהה

טקסט כהה על רקע כהה טקסט

תמונות

יש לעשות שימוש בתמונות רקע פשוטות

!

תמונות

אין "לרצף" את הרקע בתמונות

!

קישורים – יתרון הקישור הטקסטואלי

זיהוי מהיר

טעינה מהירה

Visited Link

תמיד נראים

SEO – Search Engine Optimization

פענוח בסריקה

שכפול מהיר

עיצוב דף הבית

קישורים מרכזיים

חיפוש

קישור לאינדקס או מפת אתר

גרפיקה מייצגת )לוגו חברה + גרפיקת כותרת(

חדשות

תן למשתמש מה שהוא מצפה לו

אין להציג אינפורמציה חיונית בצורה שמזכירה באנר

טיפוסי ניווט חופשי

מודל העץ מודל הכוכב

מודל הרשת

(Bread Crumbsשובל פירורים )

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

ניווט ליניארי כאופציהדורש מעט מקום

זול למימוש

חסרונותעשוי לבלבל

משתמש בלתי מנוסה עלול לפספס את הפונקציה

מצגת ממשק משתמש < ניווט < שובל פירורים )אתה נמצא כאן(

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

טאבים

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

מטאפורה ברורה גם למשתמשים לא מנוסים

מאפשר ניווט חופשי יחד עם אינדיקציה ברורה של מיקום

מאפשר למשתמשים להיחשף לאופציות הזמינות בכל רגע

?למה

עיצוב קונספטואלי

לימוד השוקמה קיים

מה רלבנטי

מבנה ותצורהמבנה מעטפת

Layout( מסכים Grid)

מסגרת ניווט

אזורי תוכן ותצוגת רכיבים

טקסט וכותרות

הגדרות רקעקהל יעד

מטרה

מאפיינים ומגבלותהגדרת סביבת העבודה

סביבת הפיתוח והתקנים

הבנת מגבלות סביבת הפיתוח

מאפייני תכנים ומותג

רזולוציההרזולוציה המומלצת לשימוש היום היא

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

WEBקריטריונים לבדיקות -

בהירות הניווטהיכן אני נמצא ולאן אני יכול ללכת מכאן

חזרה לדף ראשיקישורים

וידוא תקינותאבחנה בין כתב לקישור

תקינות טפסיםהזנה תקינה

ולידציהחיפוש

שימוש פשוטאפשרות איתור

חיפוש אקטיבי )מכוון(

תודה רבה על השתתפותכם

www.kmrom.com

2know.kmrom.com

אופיר ויינשטיין

ofir@kmrom.com

054-2545-771