ממשק המשתמש שימושיות UI – User Interface

1 UI ← ממשק המשתמש 12שיעור

קורס ניתוח מערכות מידע

ממשק המשתמשממשק המשתמששימושיותשימושיות

UI – User InterfaceUI – User Interface



אבחנה בין: עיצוב ← שיקולים אסתטיים

לבין

הנדסת אנוש←ממשק משתמש

Human Engineering:הנדסת אנוש התאמה בין: האדם-המשתמש-בעת התפקיד

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

Microsoft for 32Bitנוהל

/http://www.w3.org/TR/WCAG10תקן נגישות

?UIמה זה בעצם,



נקודת המבט של הלקוח/המשתמש KISS – Keep It Simple, Stupid

חוסר הסבלנות של הדור הצעיר, המשתמש הפחד הקדום "לא רוצה לקלקל"

נכון מביא לעבוד "עם" ולא "ליד"UI רק הורדה של עלויות הטמעה, הדרכה, אחזקה

UIנכון: קל לשימוש, מובן ואמין

UIחשיבותו של ה-



המפגש הראשוןYou never get a second chance for first chance

"עשה": מעט בחירה, הרבה ברירות מחדל•, הנחיותReboot, Readme "אל תעשה":

התקנות בספריות מערכת ההפעלהDLL החלפה של ספריה דינמית פעילה

EXE או קבצי הפעלה הפעלה קלה מייד לאחר התקנה•TIPS, FAQ, WIZARD להרבות ב- •

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

Un והסרה Setupהתקנה Install

של המערכת



תכנון נכון של הספרייה המתאימה My Document העדפה ל-

קבצי תוכניות: Program Files

Application Data או

Root לא ב-

שמות קבצים: ברורים ומשמעותיים

סיומות מקבלות קישור עם יישום הפותח סוג קובץ זה

המלצה למיקום קבצים



עקביות WINהתאמה לשולחן העבודה של מערכת ההפעלה

לפי העדפת המשתמש ICON יצירת רק של המערכת הראשית STARTשילוב ב-

, דו שיחBANNERS ללא כיתוביות, שימוש מושכל באזור ההודעות אשר בשורת המצב,

Quick Launch ב-

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

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

GUI (1)ממשק משתמש גרפי



(לא רק אלה הנראים לנו תכנון תרחישי עבודה מגוונים

טבעיים)

התאמה בינלאומית: תמיכה בקבוצות של אותיות

שפה, פיסוק, תרבות, ברירות המחדל (נגישות)תמיכת מקלדת

חלונות משניים תואמים לראשיים: תמיכה בתכונה של ריבוי צגים

פקדים מתאימים מוסכמות סידור וארגון

תוויות מתאימות(ללא הבהקים) העדפות צבע, שימוש נכון בצבע

העדפות גופן

GUI (2)ממשק משתמש גרפי



שליטת המשתמש

האפשרות להתאמה אישית mode ולא בדפוס פעולה interactive הידודית

קבועModeless חלונות משניים

אוביקטי תוכנה לוגיים: הדפסה, שמירה ברקע batch הליכי

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

משוב אסתטיקה

פשטות

עקרונות עיצוב ממוקד-משתמש



כישורים של הצוות:

פיתוח עיצוב ויזואלי

כתיבה ועריכה הנדסת אנוש

הערכת שימושיות שלבי פיתוח (הקפדה על הליך האישור):

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

אבטיפוס בדיקה טכנולוגית

סיעור מוחות, קבוצת מיקוד הערכת שימושיות:

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



)283(עמ' קלט העכבר

הסמן פעולות נפוצות

הנדסת אנוש

)286(עמ' קלט המקלדת •

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

מקשים לקיצור דרך

קלט - עקרונות בסיסיים



הירארכיה של המידע מיקוד והדגשה

מבנה ואיזון יחסים בין רכיבים

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

עיצוב ויזואלי - הבסיס להבנה

קריאת המסך היא כמו כול קריאה: העין נמשכת אל:

צבע לפני שחור לבןרכיבים בודד לפני קבוצה

גרפיקה לפני טקסטלכן הנחיות העיצוב:



צבע

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

אפשרויות לשינוי צבעים גופנים

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

בדיקה טכנולוגיתרב ממדיות

מכיוון אחדקלט "חובה" ו"אופציונאלי"

צליל

הנחיות כלליות



צבע Contrast

לא צבעי פסטל מתמזגים אפשרויות לשינוי צבעים

עיוורון צבעים גופנים

מינימום גודל צבע

אחידות אפשרות להגדלה

תמונות כוללות תיאור טקסטואלי

צליל

נגישות



האתר המערכת עסקיתPRלא רק עבור פרסום,

האתר כשער הכניסה המרכזי של המערכת

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

WEBשימושיות ב-



WEBטעויות נפוצות במהלך פרויקט

הטעותהפתרוןהמודל העסקימערכת מידע, לא דף פרסומי

ניהול הפרויקט-י לא מסורתיWEBפרויקט

ארכיטקטורת מדגישה המשתמשים, לא הארגוןמידע

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

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

אסטרטגית קישור אל אתרים אחריםקישור

"אני ועצמי עוד"קידום באתרי חיפושThere is no second chance 4 the first chanceדף הכניסה



יחס נכון בן שטחי תכנים וניווט

עיצוב עבור סביבות רבות: PLATFORMS דפדפנים

PDA מכשירי גישה: מחשבים, טלפונים ניידים, RESOLUTIONS

תמיכה בטכנולוגיה הנפוצה, לאו דווקא האחרונה הפרדה של המשמעות/תכנים מהתצוגה

הצפייה המיידית בדף הראשון

WEB(1) הנחיות כלליות לעיצוב



זמני תגובה:

שניות הוא גבול הריכוז10 הגבול בו המשתמש חש בתגובה מיידית0.1 שניה הוא גבול הזמן בו שטף המחשבה אינו 1

נפגעלשמור על אחידות זמני התגובה הגורמים המשפיעים:

השרתINTERNET חיבור השרת ל-

עצמןINTERNET ה- INTERNET חיבור המשתמש ל-

מהירות העיבוד של מחשב המשתמש והדפדפן, מספר עותקים שלMULTIMEDIA הפיתוח: מעט גרפיקה ו-

), שימוש חוזר באותה תמונה CACHE אותה תמונה (ניצול

)2(מהירות



צורות של קישורים:

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

see also, more of the same רשימות התייחסות ללא הוראות "הקלד" אלא רק סימון

(טרם ביקרו, כבר ביקרו) צביעת הקישורים

לאותו קישורURL אותו קישורי חוץ:

צבע אחר לקישור אל החוץ לאפשר יציאה מחוץ לאתר)BACK(מנטרל את ה- לא לפתוח חלונות נוספים

POP UP MENU"תפריט קופץ" -

)3(קישורים



מן ]עליה לפעול באינסוף תשתיות[הפרדה של התצוגה התוכן

סוגים: Embeddedמוטמע: שורות קוד כחלק מן הדף - Linked מקושר: נפרד, מופעל בקישור -

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

הדף קטן יותר, לכן נטען מהר יותר הסגנון נטען רק פעם אחת

לא יותר משני גופניםFIXED לא PROPORTIONAL גדלים

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

CSS - Cascading Style Sheets (4)גיליונות סגנון:



עיצוב המשדר אמינות ליצירת הרגשה של אמינות: העיצוב חשוב מן

הגרפיקה תעודת זיהוי/מקור

HTTPS

)5(אמינות



הכתיבה באתר שונה מן הכתיבה לדפוס: של הכיתוב לדפוס50% תמצות - לא יותר מ-

משפטים פשוטים, קצרים, כותרות משנה, מספור, תבליטים

חלוקה למספר דפים על ידי קישורי טקסטSkimming או רפרוף Scanningהקריאה היא יותר סריקה

כותרות משמעותיות רמות של כותרות2-3

Bullets תבליטים הארה והדגשה סיכום "תכל'ס"

המשפט הראשון

)1( הפירמידה ההפוכהעריכה של התוכן -

המשתמש בוחן האתר על פי הכותרות, ההדגשים, המספור, התבליטיםמאשר מחומר מודפס 25%מהירות הקריאה ממסך איטית ב-



חלוקה לדפים: כול נושא בדף, לא סתם פרק אחד ארוך

לתכנן את ההדפסה הכותרת היא זו הנמצאת במנועי החיפוש, תפריטי ניווט

לכול דף כותרת נפרדת כול כותרת ממתחילה במילה נפרדת

המונח החשוב בתחילת הכותרת, ללא מילות חיבור מילים2-6

עומדת בפני עצמהMicro content כוללת

Teasers ללא לא טוב: "ברוכים הבאים לאתר של חברת אושיות"

טוב: "אושיות"

)2( הפירמידה ההפוכהעריכה של התוכן -



ניגוד חזק של צבעים:Positive text שחור על רקע לבן

קצת מסיח את הדעת Negative text לבן על רקע שחור

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

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

יישור לימין או לשמאל לועזיות (הקריאות יורדת)Capital Letters להימנע מ-

Legibility (3)קריאות



Extranet ו- Intranet תיעוד הוא בעיקר ל- לא יטרחו לקרוא תיעודInternetגולשי

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

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

קישורים למילון מונחים תמציתיות

תיעוד מקוון



בין זמן התגובה ליתרונותtrade off ניתוח

הקטנת תמונות הנפשה מסיחה את הדעת, לכן השימוש שלה:

לתחושת רצף במעברים למיון ממדים, כולל זמן

Imagemap ריבוב התצוגה: הצגה של כמה אוביקטים, D3 העשרה כולל המחשה

משיכת תשומת לב

וידיאוAudio קול

גרפיקה תלת ממדית: קשה להבנה וניווט

רק ביישומים בהם יש ממש צורך

Multimedia



1-11, 1-10 ניתוח מערכות מידע פרקים 271 רשימת תיוג לבניית של ממשק טוב עמ'

http://www.w3.org/TR/WCAG10 תקן נגישות

http://www.upaisrael.org/Services/Resources.htm

דוגמאות: www.c4sa.com

www.alfa.com www.2train.com

www.sini.comwww.gismo.co.il

www.ncc.co.ilwww.hvr.co.il

[email protected]

חומר עזר



שאלות ?

Documents

ממשק המשתמש שימושיות UI – User Interface