LOGIN
התחברות או הרשמה
Avatar
להמשך הרשמה ידנית – לחץ על כפתור ההרשמה, להרשמה/כניסה מהירה בעזרת חשבון רשת חברתית – לחץ על הלוגו בכותרת

אפס סיסמה - שכחתי את שם המשתמש

שם משתמש
סיסמה
זכור אותי

he icon   en icon

בכדי להוסיף פוסט בבלוג יש להרשם או להתחבר - ההרשמה/כניסה מתבצעת מכותרת האתר.

בדיקות GUI - לא (רק) מה שחשבתם

נכתב על ידי 
שני, 31 יולי 2017 11:46
דרגו כתבה זו
(4 הצבעות)

כאשר חושבים על בדיקות GUI (אני אישית מעדיפה UI או Client) עבור אפליקציות Web, הדבר הראשון שקופץ לראש זה שדות חובה וסוגי הדאטה שניתן להזין לשדה טקסט כלשהו...

אבל זה רק קצה הקרחון.

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

אז דבר ראשון, התחלתי לחבב Mind Maps, זה עוזר מאוד להדגים את מה שעובר לי בראש וזה נראה כך:

 MindMap2

אז נתחיל מהפשוט...

Mandatory fields:

סימון של שדה חובה – על מנת שהמשתמש לא יהיה מופתע בסוף התהליך.

האפרת שדות או כפתורים אשר תלויים בשדות אחרים – על מנת לא לאפשר למשתמש להמשיך ללא שדה חובה.

מניעת יציאה משדה ריק – על מנת לחייב את המשתמש להכניס ערך טרם המשך לשדות הבאים.

סביר להניח שלא יישמו את כל 3 האפשרויות על אותן שדות ונדרשת שמירה על עקביות במסך, כך שלא נראה ולידציות מסוגים שונים באותו מסך.

Mandatory

Data types:

כאשר אנחנו בודקים תקינות של תווים חוקיים בשדות טקסט, אנחנו מקפידים על בדיקה של מספרים, אותיות ותווים מיוחדים (!@#$....), אבל יש עוד לאן לנדוד.

כאשר מדובר על טקסט, מהי מגבלת התווים הנדרשת? בטוויטר זה 140 תווים. בשדה Description כלשהו עלולה להיות מגבלה של 255 תווים שאולי לא תתאים. מומלץ לתת על זה את הדעת.

כאשר מדובר במספרים, יש הרבה אפשרויות – כמובן שכדאי לשמור על הגיון והקשר. מספרים שליליים, אפס, מספר מחוץ לתחום של int (גדול מ- 2,147,483,647 או קטן מ- 2,147,483,647-), מספר עשרוני לא שגרתי (מספר ספרות אחרי הנקודה גדול מ 4), מספר רכב עם 6, 7 או 8 ספרות.

תאריכים ניתן לבחור באמצעות date-picker, אבל ניתן גם להכניס תאריך ידנית. ומה לגבי הפורמט של התאריך? dd/mm/yyyy או שאולי mm/dd/yyyy, ויכול להיות שיש גם שעה – dd/mm/yyyy hh:mm:ss. כל הנתונים האלה בסופו של דבר נשלחים מצד ה Client אל ה Server ויכולים להיכשל.

Default value:

ערכי ברירת מחדל בדרך כלל מיוחסים, ובאופן דיי טבעי, לשדות Combo-box, בהם יש מספר אפשרויות שמהן צריך לבחור. ברירת המחדל יכולה להיות ערך ריק, "בחר..." או ערך אחר שניתן לבחור אחר במקומו.

ומה בנוגע ל Radio buttons? אנו צריכים לוודא איזה ערך מסומן מבין הכפתורים או האם מסומן ערך כלשהו כלל.

מכירים את שדה ה "...I agree to the terms and"? אז השדה הזה כברירת מחדל צריך להיות לא מסומן.

ושדה ה "...I want to receive e-mails on promotion"? השדה הזה צריך להיות מסומן?

בחלק משדות הטקסט, תהיה דוגמה לערך הרצוי – למשל This e-mail address is being protected from spambots. You need JavaScript enabled to view it., צריך לוודא שהערך ישנו ושניתן למחוק אותו.

 

Placeholder:

בדומה לדוגמה הקודמת, גם Placeholder מהווה דוגמה לערך הרצוי או הסבר כלשהו. רק שהערך הזה אינו מוזן בתוך תיבת הטקסט ואין צורך למחוק אותו. במקרה כזה, אנו מצפים שכאשר נתחיל להזין ערך בשדה, הדוגמה תיעלם. ומצד שני, כאשר נמחק את הערך שהכנסנו, הערך לדוגמה שמופיע ב Placeholder יחזור להופיע.

Placeholder

ToolTip:

כולנו מכירים את ה ToolTip. ממקמים את הסמן על שדה או אייקון ולאחר מספר שניות מופיע הסבר מתאים. מה כבר יש לבדוק פה? לא יותר מידי – את נכונות ההסבר והדקדוק וגם שיש מספיק זמן בשביל לקרוא את מה שכתוב. נקודה נוספת למחשבה – אם הטקסט ארוך, אולי צריך להוסיף wrapping לטקסט.

Tooltip

Media:

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

Animation:

קיימים כל מיני שינויים ויזואליים במסך כתוצאה מפעולות שאנו עושים – שינוי גודל או צבע טקסט כאשר עומדים על השדה, שינוי הסמן כאשר עוברים על לינק, הוספת צל כאשר עוברים על אזור מסוים בעמוד. את השינויים הללו אנחנו רוצים לאמוד – איזה שינויים צפויים והאם כולם מתקיימים באופן תקין.

האירועים שאנו נבצע יכולים להיות מעבר עם הסמן על אזור/לינק, כניסה לשדה או יציאה משדה, לחיצה על Enter או Esc ועוד.

Tabs order:

כאשר אנחנו נמצאים בדף אינטרנט כלשהו, ולא באמת משנה איזה, אנחנו יכולים לנווט בתוך אותו דף באמצעות כפתור ה Tab. רבים האתרים שבהם הסדר שבו עוברים בחלקים השונים של המסך אינו הגיוני. באופן מינימלי, מומלץ לוודא שכאשר ממלאים טופס – המעבר בין שדות הטופס הוא הגיוני.

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

Field types:

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

Date-picker – שדה בחירת תאריך מתוך לוח שנה

Radio button – שדה בחירה בודדת מתוך מספר אפשרויות

Textbox – שדה טקסט חופשי

Combo-box – שדה בחירה מתוך רשימה

Button – כפתור לחיץ

Link – פותח בלחיצה, את דף האינטרנט המקושר אליו. יש לשים לב האם פותח את הדף ב Tab נוסף בדפדפן או שמפנה את הדף הנוכחי אל היעד של הלינק.

Check-box – שדה המאפשר בחירה בין שני מצבים, מסומן או לא מסומן.

Toggle button – כפתור אשר מבצע החלפה בין שני מצבים (On/Off, שתי תצוגות וכו').

Table – בטבלת נתונים, הכותרות והנתונים המוצגים בה צריכים להיות ניתנים לקריאה וגודל העמודות ניתן לשינוי/קבוע (בהתאם לצורך).

Keyboard functions:

זה אולי נשמע דומה לנושא ה Tabs order, אבל רק חלקית.

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

Esc – יציאה משדה ללא שינוי התוכן

Enter – יציאה משדה עם שמירת השינויים

Tab – מעבר לשדה הבא

Shift-Tab – חזרה לשדה הקודם.

ובנוסף:

Space – שינוי מצב של Check-box, Toggle button, Radio-button.

חצים – כאשר אנחנו לא בתוך שדה, החצים מאפשרים לנו לגלול את המסך או לעבור לאזורים אחרים בדף.

PageUp/PageDown – משמשים לגלילה בדף.

* היכולת לעבור שורה מבלי לצאת מהשדה. (לא מחייב אבל ייתכן שנדרש)

Scroll:

מתי בפעם האחרונה ראיתם אתר אינטרנט עם גלילה אנכית וגם אופקית? אני נתקלת בזה כל הזמן, מבלי לאתגר את האתר, עם תצוגת מסך מלא ועל מסך 24 אינץ'.

אנחנו רוצים לוודא שזה לא קורה אצלנו.

לעומת זאת, לא פעם אני נתקלת בעמודים שבהם לא הוסיפו גלילה אנכית, וכל מה שנותר לעשות על מנת להגיע לתחתית העמוד זה ללחוץ על PageDown או חץ-למטה ולקוות לטוב.

Scroll

Refresh:

מה קורה לדף שאנחנו נמצאים בו אם עושים לו Refresh? האם לינקים שכבר לחצנו עליהם משנים את הצבע שלהם? האם מידע שהוזן בדף נשמר? האם דאטה ששינינו חזר לערכו הקודם? האם הדפדפן מזהיר לפני יציאה מדף שלא נשמרו בו השינויים?

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

Popup window:

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

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

Screen size:

אנחנו נרצה לבדוק את תקינות התצוגה בכל המצבים שבהם התחייבנו לתמוך.

בין אם המסך אינו ב full-screen, מסך של Laptop, מסך 24 אינץ' או ברזולוציות שאינן מיטביות, אנו נרצה לוודא שהתצוגה של העמוד אינה נפגעת מבחינת הצגת מדיה, זמינות אזורים שונים בעמוד, זמינות כפתורים והצגת טקסט.

Syntax:

Syntax כולל דקדוק, פיסוק, אות גדולה בתחילת שם, מקום, משפט וכותרת.

Double negative:

כאשר אנחנו נשאלים האם ברצוננו לעזוב את הדף מבלי לשמור את השינויים, על איזה כפתור נרצה שיהיה הפוקוס – כן או לא? ובמידה שהכפתורים צבעוניים – איזה מהם יהיה ירוק ואיזה יהיה אדום?

Leave without saving

צריך לשים לב לזה כאשר הפעולה שנשאלים עליה "מסוכנת" למשתמש.

Permanent change

 

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

 

* תודות למי שתרם לתכני ה Mind Map:
Assaf Lowenstein
Kobi Halperin
Doron Bar
Yoni Flenner

הורדת קבצים מצורפים:
שונה לאחרונה ב רביעי, 02 אוגוסט 2017 15:12

חובה להיות משתמש רשום במערכת בכדי להגיב - ההרשמה/כניסה בכותרת האתר

טיפים

  • אל תפסיקו לשאול שאלות...
    אל תפסיקו לשאול שאלות... במסגרת עבודת הבדיקות - אל תפסיקו לשאול שאלות... אחרי שקראתם את הרקע לנושא הנבדק, פנו למהנדסי המערכת, והבהירו עמם נקודות שאינן ברורות, גם אם נראה לכם כי הבנתם הכל, השתדלו לשאול שאלות פתוחות - לעולם אינכם…
    קרא עוד...
  • בודק - עקוב אחרי בודקים אחרים בטוויטר ובבלוגים
    בודק - עקוב אחרי בודקים אחרים בטוויטר ובבלוגים בודק - עקוב אחרי בודקים אחרים בטוויטר ובבלוגים, חלוק רעיונות והתנסויות, כתוב, קבל משוב ושפר את יכולות ההתדיינות – נראה כי היתרונות בעולם הטוויטר חמקו מעיני קהילת הבודקים הישראלית אשר לרוב דווקא ממהרת לאמץ ומשתלבת בסביבות…
    קרא עוד...
לרשימה המלאה >>