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

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

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

he icon   en icon

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

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

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

כאשר חושבים על בדיקות 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

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

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

  • Bloggers Club: Implementing Change

    Bloggers Club: Implementing Change I’ve written a fair bit about implementing change in the past, including two articles at the Ministry of Testing site on Introducing Colleagues to Exploratory Testing and going about implementing change when you’re not a manager. However, in this post, I would like to dive deeper into how the status quo bias makes implementing change rather difficult. Status quo bias is evident when people prefer things to stay the same by doing nothing or by sticking with a decision made previously.https://www.behavioraleconomics.com/resources/mini-encyclopedia-of-be/status-quo-bias/ One of the key aspects of the status quo bias that makes it so difficult to implement change is that it’s generally easier to do nothing i.e. to not try and implement change in the first place. Even if people are unhappy with how things are, you’d be surprised by how the same people may not be open to ideas to change – that would help fix what is making them unhappy. To take it out of a work context, if you’ve ever had a friend complain (on and on and on) about their romantic partner and talk about how unhappy they are with them – but then they never want to do anything to fix their problems or leave their romantic partner – then you’ve seen how powerful the status quo bias can be. Actually, the status quo bias reminds me a lot of this saying: better the devil you know than the devil you don’t– used to say that it is better with a difficult person or[…]

    3.08.2021 | 9:32 קרא עוד...
  • My blog posts on Tech buzzwords testers should at least know about have been published!

    Checkout my series of two blog posts on Tech buzzwords testers should at least know about: https://blog.testproject.io/2021/07/08/tech-buzzwords-testers-should-at-least-know-about-part-1/ and https://blog.testproject.io/2021/07/29/tech-buzzwords-testers-should-at-least-know-about-2/. With lots of useful links for in-depth learning. Enjoy.

    3.08.2021 | 5:21 קרא עוד...
  • A11y with Ady: August 2021

    Introduction: I hereby dub the first Tuesday of the month as “Accessibility Tuesday”, so; Welcome to the latest edition of a11y with Ady. I hope you enjoy it and find something useful and I’m happy to hear any feedback or thoughts or anything you would like to hear more about from the world of accessibility. General: The article Five ways to include d/Deaf users in your designs by Rachele DiTullio, an accessibility engineer and a front-end developer. Her piece covers ways to consider d/Deaf people. Some top tips in this that apply to many situations. The term D/deaf is used throughout higher education and research to describe students who are Deaf (sign language users) and deaf (who are hard of hearing but who have English as their first language and may lipread and/or use hearing aids).https://www.tpgi.com/five-ways-to-include-d-deaf-users-in-your-designs/ Compliance: Want to get more familiar with the Web Content Accessibility Guidelines (WCAG) but don’t know where to start? How about a daily explanation of them to your inbox? Sign up using the link below. https://dwcag.org/ Technical: Hiding content is always a challenge. Who are you hiding it from? Everyone? Or should screen reader users be able to find it? Lots of questions pretty much every time. In this excellent post Kitty Giraudel, a frontend developer focused on accessibility, runs through a host of ways explaining which are and are not accessible. https://kittygiraudel.com/2021/02/17/hiding-content-responsibly/ Disability:From the Accessibility in Government blog, this is a longer read about invisible disabilities. Although a recent post the story is[…]

    3.08.2021 | 2:48 קרא עוד...

טיפים

לרשימה המלאה >>