by Bill Labus
לשלם זה כואב, בוא נעשה את זה מהיר, קליל ויותר חוויתי. אולי לשלם יהיה אפילו נחמד? (: אוסף השראה קליל מדריבל ומאמרים מומלצים לקינוח.
לשלם זה טכני ובמהלכו יש מליון הזדמנויות להתחרט. טופס מהיר, פשוט וחווייתי ימנע בריחה של יוזר, לכן כדאי לראות כמה השתפרו הטפסים בשנים האחרונות ונהיו כל כך פשוטים וחוויתיים. כדאי לגלול עד למטה ולקרוא את המאמרים המומלצים בנושא.

דוגמאות ויזואליות יפות:

Payment Settings
Credit card checkout
Credit card checkout
Credit card - Checkout flow
Credit card – Checkout flow
Credit Card Payment
Credit Card Payment
Incoming!
Incoming!
The shopping cart payment module [Animation]
The shopping cart payment module [Animation]
Mobile Banking app
Mobile Banking app
P2P Animation
P2P Animation

 והנה דוגמה עובדת:

See the Pen Daily UI #002: Credit Card Checkout by Fabio Ottaviani (@supah) on CodePen.

מאמרים מומלצים לקריאה בנושא

"Improve the payment experience with animation" -מאמר קליל שמדגים איך אנימציות נותנות ערך מוסף לחווית משתמש בטפסים.

"The anatomy of credit card form"– מאמר המסביר דרך קייס סטאדי על דגשים לתכנון ועיצוב טופס תשלום.

"The 10 commandment of good form design on the web"– מאמר העוסק בעיצוב נכון של טפסים.

"practical implementation methods for improving your mobile designs"  לוק רובלוסקי , הרצאה מרתקת בנושא טפסים שמאוד מומלץ לפנות לה זמן ולצפות:

https://www.youtube.com/watch?v=nmKMz3Fg76M

_________________________________________________________________________

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

לטטוריאל לייצוא גיף איכותי

השראה לגיפים

טרנדים וטיפים להצגת העיצוב שלכם בדריבל

אנימציות בחווית משתמש: מאין באת ולאן תשוב

אנימציות וחווית משתמש: יד ביד

Share

קצת על המחבר:

תמצאו את Pixel Perfect ב:

מאמרים שעשויים לעניין אותך

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

הצטרפו לניוזלטר שלנו!

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




    What is 2 + 9 ?

    אשמח לשלוח לך פרטים!

    אנא מלא/י את פרטי הקשר שלך כאן ואשלח לך אימייל עם כל הפרטים אודות ההכשרה
    ;