עזרה למשתמשים להירשם
טופס ההרשמה הוא לעיתים קרובות האינטראקציה הראשונה עם טופס באתר שלכם. חשוב מאוד לעצב טופס הרשמה טוב, וטופס מאובטח הוא חיוני.
בואו נראה את טופס ההרשמה והאופן שבו תוכלו לעזור למשתמשים להירשם באתר שלכם.
צמצם את טופס ההרשמה והצג רק את פקדי הטופס הדרושים ליצירת חשבון. מומלץ לא להכפיל את פקדי הטפסים כדי לעזור למשתמשים להזין את פרטי החשבון שלהם בצורה נכונה. במקום זאת, אפשר לשלוח הודעת אישור באימייל.
לעזור למשתמשים למלא את פרטי החשבון שלהם
אפשר לעזור למשתמשים למלא את פרטי החשבון שלהם באמצעות מאפיין autocomplete המתאים.
השתמש ב-autocomplete="email" בשדה האימייל וב-autocomplete="new-password" בשדה לסיסמה חדשה.
מידע נוסף על מילוי אוטומטי של פקדי קלט.
תוכל גם לעזור למשתמשים להזין סיסמה מאובטחת על ידי הצעת סיסמה חושפת <button>.
מידע נוסף על הדפוס לחשיפת סיסמה
איך מוודאים שטופס ההרשמה מאובטח
לעולם אל תאחסן או תשדר סיסמאות בטקסט פשוט. הקפידו לבצע salt ו-hash של סיסמאות, ואל תנסו להמציא אלגוריתם גיבוב משלכם.
להציע אימות רב-שלבי, במיוחד אם אתם מאחסנים מידע אישי או רגיש. בשיטות מומלצות לשימוש ב-SMS OTP ובהפעלת אימות חזק באמצעות WebAuthn מוסברים איך להטמיע אימות רב-שלבי.
צריך לוודא שהמשתמשים לא משתמשים בסיסמאות שנחשפו. לדוגמה, תוכלו להשתמש ב-API של האם אני Pwned כדי לזהות סיסמאות שנחשפו, ולהציע למשתמשים להזין סיסמה חדשה אחרת, או להזהיר אותם אם הסיסמה שלהם נחשפה.
עזרה למשתמשים להיכנס
בהמשך נראה איך ליצור טופס כניסה כדי להבטיח שמשתמשים יוכלו להיכנס לאתר שלך בקלות.
ודא שהמיקום של לחצני ההרשמה והכניסה יהיה ברור. צריך לוודא שאפשר להשתמש בטופס במכשירי מגע:
- גודל יעד ההקשה של הלחצנים הוא לפחות 48 פיקסלים.
- ה-
font-sizeשל רכיבי הטופס גדול מספיק (20pxכמעט מתאים לנייד). - יש מספיק רווח (
margin) בין פקדי הטפסים, ושערכי הקלט גדולים מספיק (יש להשתמש ב-padding: 15pxלפחות בנייד).
עוזרים למשתמשים למלא את כתובת האימייל והסיסמה
עזרה לדפדפנים ולמנהלי סיסמאות במילוי אוטומטי של פרטי החשבון.
משתמשים ב-autocomplete="email" בשדה האימייל וב-autocomplete="current-password" בשדה הסיסמה הנוכחי.
כדי לעזור למשתמשים למלא את פרטי החשבון באופן ידני, אפשר להשתמש בשדה type="email"
כדי להציג את המקלדת המתאימה במסך במכשירים ניידים.
צריך להשתמש במאפיין required בשדה כתובת האימייל והסיסמה כדי להזהיר מפני ערכים לא חוקיים כשהמשתמש שולח את הטופס.
כדאי להשתמש באימות בזמן אמת כדי לעזור למשתמשים לתקן נתונים לא חוקיים ברגע שהם מזינים אותם, במקום להמתין לשליחת הטופס.
מוודאים שהמשתמשים יכולים לראות את הסיסמה שהם הזינו
הטקסט שהזנת עבור <input type="password"> מוסתר כברירת מחדל,
כדי לכבד את פרטיות המשתמשים.
הצגה של <button> שמייצגת את החשיפה של הטקסט שהוזן, וכך תעזור למשתמשים להזין את הסיסמה שלהם.
למידע נוסף על הטמעת חשיפת סיסמה <button>
חשוב לוודא שאפשר להשתמש בטופסי הכניסה ובטופס ההרשמה שלך
חשוב לבדוק את טופסי הכניסה וההרשמה באופן קבוע עם אנשים אמיתיים כדי לוודא שהאימות פועל כצפוי. אפשר להשתמש ב-Analytics ובמדידת משתמשים אמיתית (RUM) כדי לאסוף נתוני שדות, ובכלים כמו Lighthouse ו-PageSpeed Insights כדי להריץ בדיקות בעצמכם. בקישורים הבאים אפשר לקרוא מידע נוסף על בדיקת נוחות השימוש ועל איסוף נתונים.
צריך לוודא שהטפסים פועלים בדפדפנים שונים ובפלטפורמות שונות. אפשר לבדוק את הטופס בגדלים שונים של מסכים, באמצעות המקלדת בלבד, או באמצעות קורא מסך כמו VoiceOver ב-Mac או NVDA ב-Windows.
לעזור למשתמשים לשנות את הגדרות החשבון שלהם
ודאו שהמשתמשים יכולים לשנות כל אחת מהגדרות החשבון, כולל כתובות אימייל, סיסמאות ושמות משתמש.
חשוב לאפשר שקיפות מלאה של הנתונים שאתם מאחסנים, ועזרו למשתמשים להוריד את כל המידע האישי שלהם בכל זמן. חשוב לוודא שהמשתמשים יכולים למחוק את החשבון שלהם, אם זה מה שהם רוצים. תכונות ניהול חשבון כמו אלה עשויות להיות דרישה משפטית באזורים מסוימים.
צריך לוודא שהמשתמשים יכולים לעדכן את הסיסמאות שלהם
הקל על המשתמשים לעדכן את הסיסמה שלהם.
בקשו מהמשתמשים את הסיסמה הנוכחית לפני שהם ישנו אותה, ושלחו אימייל לגבי שינוי סיסמה עם אפשרות לחזור לביטול החשבון ולנעול אותו.
עליכם להוסיף את האפשרות לבקש סיסמה חדשה, ולשקול לציין כתובת URL של .well-known כדי לבקש סיסמה חדשה.